BrowserRouter，路由，路由器，不工作的路由

Question

我正在学习如何做出反应，并试图建立一个导航栏。但是，当我试图使用路由使我的导航条链接功能或添加页面。它给我看了一页空白。但是当我删除这个部分时，<BrowserRouter>...</BrowserRouter>。我的导航栏显示，但由于我不使用路由那里，它不会显示页面组件时，我去那个页面(即http://localhost:3000/about)。

代码：

import React, { Component } from 'react';
import './App.css';
import 'whatwg-fetch';
import Series from '../../containers/Series';
import Navbar from '../Navbar';
import {BrowserRouter, Route, Router, Routes} from 'react-router-dom';
import About from '../../pages/about';
import Home from '../../pages/home';

function App() {
  return (
    <>
      <Navbar />
      <BrowserRouter>
        <Routes>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </Routes>
      </BrowserRouter>
    </>
  );
}
 
export default App;

Answer 1

您读过这个库的文档吗？BrouserRouter用于保持UI与URL保持同步。

首先，您必须阅读指南部分。如果仔细观察，您会发现必须将Switch组件用作Route的包装器，而不是Routes。

在你的情况下，它必须看起来像

    <>
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </Switch>
      </BrowserRouter>
    </>

Switch查看它的子Route，并呈现与当前Route匹配的第一个URL。