使用 React Router Dom 实现路由导航的详细过程

npm install react-router-dom@5.3.4

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

import React from 'react';
import { NavLink } from 'react-router-dom';
const Navigation = () => {
  return (
    <div className="navigation">
      <ul>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
        <li>
          <NavLink to="/home">Home</NavLink>
        </li>
      </ul>
    </div>
  );
}
export default Navigation;

import React from 'react';
import { Switch, Route, NavLink, Redirect } from 'react-router-dom';
import News from './News';
import Message from './Message';
const Home = () => {
  return (
    <div>
      <h3>I am Component Home</h3>
      <ul className="nav nav-tabs">
        <li className="nav-item">
          <NavLink className="nav-link" to="/home/news">News</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" to="/home/message">Message</NavLink>
        </li>
      </ul>
      <Switch>
        <Route path="/home/news" component={News} />
        <Route path="/home/message" component={Message} />
        <Redirect to="/home/news" />
      </Switch>
    </div>
  );
}
export default Home;

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