Chrome 安装 Router 后我的 React App 显示奇怪的错误

Question

我正在努力将网站从静态 HTML/CSS/JS 站点转换为 React SPA，我想使用 React Router 进行导航。我将 Router 安装到正确的目录，从正确的目录运行 npm start，我的终端显示一切都编译成功，但我的浏览器看起来像这样：

App.js 文件:

import React from 'react';
import './styles/App.css';
import Navbar from './components/Navbar';

class App extends React.Component {
  render() {
    return (
      <div className = "App">
      <div id ='container' className = 'container light'>
      <Navbar />
      </div>
        
      </div>
    )
    
  }
}



export default App;

Navbar.js 文件:

import React, { Component } from 'react';
import '../styles/App.css';
import logo from '../img/logo.png'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import App from '../App';
import About from './About';
import Portfolio from './Portfolio';

class Navbar extends Component {
    render() {
        return (
            <Router>
                <div className="Navbar">
                    <nav>
                        <ul className="navlist">
                            <Link to={App}>
                                <li className="active">Home</li>
                            </Link>
                            <Link to={About}>
                                <li>About Me</li>
                            </Link>
                            <Link to={App}>
                                <img className="brand" src={logo} alt="" />
                            </Link>
                            <Link to={Portfolio}>
                                <li>Portfolio</li>
                            </Link>
                            <li className="toggler"><span role="img" aria-label="dark moon"></span></li>
                        </ul>
                    </nav>
                    <Switch>
                        <Route path= {About}>
                            <About />
                        </Route>
                        <Route path= {Portfolio}>
                            <Portfolio />
                        </Route>
                        <Route path= '{App}'>
                            <App />
                        </Route>
                    </Switch>
                </div>
            </Router>
        )
    }
}

export default Navbar;

About.JS

import React, { Component } from 'react';
import '../styles/App.css';
import Navbar from './Navbar'

class About extends Component {
    render() {
        return (
            <div className="About">
                <Navbar />
                <h1>Hello World, This is the About Page</h1>
            </div>
        )
    }
}

export default About;

Portfolio.JS

import React, { Component } from 'react';
import '../styles/App.css';
import Navbar from './Navbar'

class Portfolio extends Component {
    render() {
        return (
            <div className="Portfolio">
                <Navbar />
                <h1>Hello World, This is the Portfolio Page</h1>
            </div>
        )
    }
}

export default Portfolio;

我是 React 的新手，我不确定自己做错了什么。很高兴分享任何需要的额外信息。

Answer 1

那不是 Link 的用法，to prop 应该有你想要导航的路径，然后你必须使用带有两个选项的 Route HOC，pass作为子组件或在 component prop

中的组件

Link

<Link to="/about">
  About
</Link>

路线

<Route path="/about" component={About} />

<Route path="/about">
  <About/>
</Route>

Chrome 安装 Router 后我的 React App 显示奇怪的错误

Chrome is showing strange errors for my React App after installing Router

npm

reactjs

react-router

create-react-app