react-router-dom v5

react-router-dom 会自动安装 react-router核心框架，不需要安装 react-router
react-router-dom v5文档 https://v5.reactrouter.com/web/guides/quick-start

yarn add react-router-dom

react-router-dom 常用组件

• 渲染出 标签
• 利用 H5的 history实现路由
  • 路由导航与原生浏览器操作一致
• 利用 window.location.hash实现路由切换
  • 通过 url识别路径
• 只匹配一个路由

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/signin" render={() => <h1>登录页面</h1>} />
        <Route path="/signup" component={Signup} />
        <Route path="/register" component={Register} />
        <Route path="/detail/:id" component={Detail} />
        <Route render={ () => <h1>404 Not Found</h1> } />
        </Switch>
    </Router>
  );
}
export default App;

basename

basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠
<BrowserRouter basename="/calendar">
basename文档 https://v5.reactrouter.com/web/api/HashRouter/basename-string

<BrowserRouter basename={pkg.name}>
  <Router>
    {
      routes.map(route => {
        const {element: Component, ...rest} = route;
        return <Route {...rest} element={<Component/>}/>
      })
    }
  </Router>
</BrowserRouter>

最终将被呈现为 <a href="/calendar/today" />