BrowserRouter，路由，路由器，路由不起作用

Question

I am learning to react and trying to build a nav bar. But when I tried to use route to make my navbar links functional or add pages. It shows me a blank page. But when I delete this portion <BrowserRouter>...</BrowserRouter> . My nav bar shows but as I don't use route there it won't show page components when I go to that page (ie http://localhost:3000/about).

Code:

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

Did you read the docs of this library ? BrouserRouter is used to keep your UI in sync with the URL.

You have to read guide section first of all. If you look carefully you see that you must use Switch component like a wrapper for your Route 's instead of Routes .

In your situation it must looks like

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

A Switch looks through its children Route 's and renders the first one that matches the current URL.