react-router-dom 中文文档

快速开始

想开始在项目中使用 react-router，你需要一个 react web 项目。如果你需要搭建一个全新的项目，我们推荐使用 Create React App。这是一个很棒的工具，并且对 react-router 的支持很好。

npx create-react-app demo-app
cd demo-app

安装

你可以使用你喜欢的包管理器（npm 或者 yarn）从官方的 npm 源安装 react-router-dom。

npm install react-router-dom

示例 1：基础路由

接下来，将下列代码复制/粘贴到 src/App.js 文件中。

在这个示例中，我们有 3 个页面被 react-router-dom 处理。主页、”/about“和”/user“页面。点击不同的<Link />组件，路由将会渲染响应的页面。

源码中，<Link />组件包裹了一个 <a href=""></a>。因此，使用读屏器或键盘依旧可以使用此应用。

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

export default 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> 会遍历所有包含的 <Route>s 并渲染匹配的第一条 */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  )
}

function Home() {
  return <h2>Home</h2>
}

function About() {
  return <h2>About</h2>
}

function Users() {
  return <h2>Users</h2>
}

示例 2：嵌套路由

这个示例将向你展示嵌套路由如何工作。路由/topics将会载入 Topics组件，接着Topics组件将会渲染组件中的根据路径/:id动态匹配的路由

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

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  )
}

function Home() {
  return <h2>Home</h2>
}

function About() {
  return <h2>About</h2>
}

function Topics() {
  let match = useRouteMatch()

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      {/* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */}
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  )
}

function Topic() {
  let { topicId } = useParams()
  return <h3>Requested topic ID: {topicId}</h3>
}

下一步

希望这些示例能给你带来一些使用 react-router-dom 来创建 web 应用的启发，继续阅读下一章来获得更多关于 react-router 的信息

最后修改时间： 50 seconds ago