react-router-dom 中文文档

核心组件

react-router 中有三种主要类型的组件，分别是

路由：如 <BrouwserRouter>, <HashRouter>
路由匹配器：如 <Route>, <Switch>
导航：如 <Link>, <NavLink>, <Redirect>

通常，导航也称为路径变更器。

所有在 web 应用中使用的组件都应该从 react-router-dom 包中引入

路由

所有 react-router 应用的核心组件都是路由组件。对于 web 应用，react-router-dom 提供了和两种路由器。他们的区别在于如何存储 url 和如何与 web 服务器通信。

<BrowserRouter> 使用 url 路径来导航。通常情况下，这是最美观和优雅的方式。但是前提是 web 服务器的被正确的配置。也就是说，你的 web 服务器必须将所有 react-router-dom 在客户端管理的路由指向相同的页面（index.html），否则在你刷新页面的时候就会因为无法找到服务器资源而返回 404 错误。Create React App 在开发环境中已经默认开启了这项配置，同时也提供了在生产环境中的配置向导
<HashRouter 在 url 中的 hash 部分存储路径，所以路径长得会像是这样: http://example.com/#/your/page。因为 hash 部分在发起服务器请求是会被自动忽略，所以服务端不需要特殊的配置即可支持这种路由。

使用路由的过程中，请确保路由组件正确包裹所有需要渲染的路由路径。通常情况下，我们推荐用路由组件包裹整个 react 项目的根组件：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

function App() {
  return <h1>Hello React Router</h1>
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

路径匹配器

react-router-dom 提供了两个路由匹配组件：Switch 和 Route。当<Switch>被渲染，它会搜索其 children <Route>内容找到一个其 path 当前的 URL 匹配。当找到时，它将渲染该对象。而<Route>而忽略所有其他对象。这意味着您应将<Route> 的特定性更高（通常情况下代表更长的）放在不那么特定的路径之前。(比如/post/aaa/bbb应该放在/post/aaa之前，防止 Switch 组件渲染后者对应的组件)

如果没有<Route>匹配项，则<Switch>渲染器不呈现任何内容

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

function App() {
  return (
    <div>
      <Switch>
        {/* If the current URL is /about, this route is rendered
            while the rest are ignored */}
        <Route path="/about">
          <About />
        </Route>

        {/* Note how these two routes are ordered. The more specific
            path="/contact/:id" comes before path="/contact" so that
            route will render when viewing an individual contact */}
        <Route path="/contact/:id">
          <Contact />
        </Route>
        <Route path="/contact">
          <AllContacts />
        </Route>

        {/* If none of the previous routes render anything,
            this route acts as a fallback.

            Important: A route with path="/" will *always* match
            the URL because all URLs begin with a /. So that's
            why we put this one last of all */}
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  )
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
)

注意： <Route path> 仅仅代表从路由的开头开始匹配，而不是匹配整个 url。所以 <Route path="/">会始终匹配所有的 url。因此，我们通常将其放在<Switch>的最后一项。另一种可能的解决方案是使用<Route exact path="/">

注：尽管 react-router 支持在<Switch>组件之外渲染<Route>，在 5.1 版本之后，我们建议您使用 useRouteMatch() hook。并且。我们不建议您渲染没有 path 的<Route>，而是使用 hooks 来获得你需要的与路由相关的参数。