安装路由器后，Chrome 显示我的 React 应用程序出现奇怪错误

Question

我正在将网站从静态 HTML/CSS/JS 网站转换为 React SPA，我想使用 React 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;

关于.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 属性应该有你想要导航的路径，然后你必须使用带有两个选项的Route HOC，将组件作为子组件传递或在component道具

链接

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

路线

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

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