学习地址:
https://reacttraining.com/react-router/web/guides/quick-start
源码地址:https://github.com/ReactTraining/react-router
使用版本: 5.1.2
实例一: 基础的router
代码:
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}
function Users() {
  return <h2>Users</h2>;
}
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
export default App;
将其部署到服务端,刷新一下,就找不到了路由了。


百度找到的答案是使用HashRouter 替换BrowserRouter, url后面加了一个/#。刷新也不会是Not Fuound了。

可是这个URL貌似不太美观,待研究方案:
React-router中使用BrowserRouter跳转后刷新出现404问题的解决










