简介

这是我学习 react-router-dom@5.1.2 时，为了加深自己对 react-router-dom 的理解和帮助一些英文不好的同学，对官方文档进行了翻译，本人水平有限，如有理解和翻译错误，欢迎大家指正。官网地址

快速入门

要在 web 应用中开始使用 React Router，您将需要一个 React Web 应用程序. 如果您需要创建一个, 我们建议您尝试 Create React App。这是一个非常流行的工具，可与 React Router 很好地配合使用。

首先，安装 create-react-app 并使用它创建一个新项目。

安装

您可以使用 npm 或 yarn 从公共 npm 注册表中安装 React Router。由于我们构建的是 web app，因此在本指南中将使用 react-router-dom。

npm install -g create-react-app       // 全局安装 create-react-app
create-react-app demo-app             // 创建一个 react 项目
cd demo-app                           // 进入 react 项目目录
npm install react-router-dom          // 安装 react-router-dom

接下来，将以下两个示例之一复制 / 粘贴到 src/App.js 中。

第一个示例：基本路由

在此示例中，路由器处理了 3 个“页面”：主页、关于页面和用户页面。当您点击不同的 <Link> 时，这个路由会渲染匹配的 <Route>。

注意：其实 <Link> 最后渲染出来是一个有真实 href 的标签，因此使用键盘导航或屏幕阅读器的人也可以使用 react-router-dom。

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';

function Home(props) {console.log('Home=>', props);
    return <h2>Home</h2>
}

function About(props) {console.log('About=>', props);
    return <h2>About</h2>;
}

function Users(props) {console.log('Users=>', props);
    return <h2>Users</h2>;
}

function App() {
    return <BrowserRouter>
        <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>
            {/* <Switch> 通过查找所有的子 <Route> 并渲染与当前 URL 匹配的第一个 <Route> 的内容 */}
            <Switch>
                <Route path={'/about'}>
                    <About />
                </Route>
                <Route path={'/users'} children={<Users />}/>
                <Route path={'/'}>
                    <Home />
                </Route>
            </Switch>
        </div>
    </BrowserRouter>
}

ReactDOM.render(<App />, document.querySelector('#root'));

第二个示例：嵌套路由

此示例显示了嵌套路由的工作方式。路线 /topics 会加载 Topics 组件，在这个组件上的 path:id 值上有条件地渲染任何其他 <Route>。

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

function Home(props) {console.log('Home=>', props);
    return <h2>Home</h2>
}

function About(props) {console.log('About=>', props);
    return <h2>About</h2>;
}

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

function Topics() {const match = useRouteMatch();
    console.log('match=>', match);
    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>
            
            {/*
                Topics 页面有自己的 <Switch>，其中包含更多的路线，建立在 /topics 路径之上
                您可以将第二个 <Route> 视为所有主题的“索引”页面，或者当未选择任何主题时显示的页面
            */}
            <Switch>
                <Route path={`${match.path}/:topicId`}>
                    <Topic />
                </Route>
                <Route path={match.path}>
                    <h3>Please select a topic.</h3>
                </Route>
            </Switch>
        </div>
    );
}

function App() {
    return <BrowserRouter>
        <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>
    </BrowserRouter>
}

ReactDOM.render(<App />, document.querySelector('#root'));

继续

希望这些示例能让您对使用 React Router 创建 web app 有点感觉。继续阅读可以了解有关 React Router 中主要组件的更多信息！

未完待续 ….