React-router/react-router-dom学习指南（附代码）

React-router/react-router-dom学习指南（附代码）

---

目录

1. 快速入门

2. 基本组件

3. 服务器渲染

4. 代码拆分

5. 滚动恢复

6. 原理（动态路由/静态路由）

7. 测试

8. Redux 融合

9. 静态路由

---

1.快速入门

您需要一个React web应用程序来添加react -router。
如果你需要创建一个，最简单的方法就是使用一个叫做create React App的脚手架工具。
首先安装create- response -app(如果你还没有的话)，然后用它创建一个新项目。

npm install -g create-react-app
create-react-app demo-app
cd demo-app

安装

React Router DOM发布到npm，因此您可以使用npm或yarn安装它。npm安装react-router-dom
将下面的示例复制/粘贴到src/App.js中。

npm install react-router-dom

例子:基本的路由

在这个例子中，我们有3个由处理的“页面”组件。注意:我们使用<Link to="/"> 而不是<a href="/">。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

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

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

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

function AppRouter() {
  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>

        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
      </div>
    </Router>
  );
}

export default AppRouter;

!!!点击链接直接体验->：基本路由体验

例子:嵌套的路由

这个例子展示了嵌套路由是如何工作的。route /topics加载topics组件，该组件在路径上有条件地呈现任何进一步的:id值。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <Header />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

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

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

function Topic({ match }) {
  return <h3>Requested Param: {match.params.id}</h3>;
}

function Topics({ 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>

      <Route path={`${match.path}/:id`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Header() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>
  );
}

export default App;

!!!点击链接直接体验->：基本路由体验

现在你可以开始练习了。路由快乐!

---

2. 基本组件

React Router中有三种类型的组件:路由器组件、路由匹配组件和导航组件。
web应用程序中使用的所有组件都应该从response -router-dom导入。
eg：

import { BrowserRouter, Route, Link } from "react-router-dom";

路由器

每个React路由器应用程序的核心都应该是一个路由器组件。对于web项目，response -router-dom提供了<BrowserRouter>和<HashRouter>路由器。这两种方法都将为您创建一个专门的历史对象。一般来说，如果有响应请求的服务器，应该使用<BrowserRouter>;如果使用静态文件服务器，应该使用<HashRouter>。

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);

路由匹配

有两个路由匹配组件:< route >和<Switch>。

路由匹配是通过比较<Route>的路径 path 和当前位置的路径名来完成的。当<Route>匹配时，它将呈现内容;当不匹配时，它将呈现null。没有路径的<Route>总是匹配的。

您可以在任何你希望的位置包含<Route>来呈现内容。通常，将许多可能的<Route>并排列出是有意义的。<Switch>组件用于将<Route>分组在一起。

<Switch>对于分组<Route>不是必须存在的，但是它非常有用。一个<Switch>将遍历它的所有子元素<Route>，并且只呈现与当前位置匹配的第一个元素。当多个路由的路径匹配相同的路径名时，当在路由之间进行动画转换时，以及当没有路由匹配当前位置时(这样您就可以呈现一个“404”组件)，这都很有帮助。

import { Route, Switch } from "react-router-dom";

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
  {/* when none of the above match, <NoMatch> will be rendered */}
  <Route component={NoMatch} />
</Switch>

路由渲染属性

对于如何呈现给定<Route>的组件，您有三种支持选择:组件、呈现和子组件。您可以查看<Route>文档以获得关于每个组件的更多信息，但是在这里我们将重点介绍组件和呈现，因为这两个组件几乎总是使用。

组件应该在您拥有现有组件时使用(可以是React)。要呈现的组件或无状态功能组件。render接受内联函数，仅当必须将范围内变量传递给要呈现的组件时才应使用。您不应该使用带有内联函数的组件支柱来传递范围内变量，因为您将获得不希望的组件卸载/重新加载。

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

导航

React Router提供一个<Link>组件来在应用程序中创建链接。无论在何处呈现<Link>，都会在应用程序的HTML中呈现一个来链接。

<NavLink>是一种特殊类型的<Link>，当它的to prop匹配当前位置时，可以将自己设置为“active”。

任何时候您想强制导航，都可以呈现<Redirect>。当<Redirect>呈现时，它将使用 to prop导航。

<Link to="/">Home</Link>
// <a href='/'>Home</a>

location.// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
  React
</NavLink>
// <a href='/react' className='hurray'>React</a>

<Redirect to="/login" />

---

3. 服务器渲染

---

4. 代码拆分

---

5. 滚动恢复

---

6. 原理（动态路由/静态路由)

---

7. 测试

---

8. Redux 融合

Redux是React生态系统的重要组成部分。我们希望使React Router和Redux的集成尽可能无缝，以满足用户对两者的需求。

阻塞更新

一般来说，React Router和Redux可以很好地协同工作。不过，有时应用程序的组件在位置发生变化时不会更新(子路由或活动导航链接不会更新)。

比如发生这样的情况:

1. 组件通过connect()(Comp)连接到redux。
2. 该组件不是一个“路由组件”，这意味着它不是这样呈现的:< route component={SomeConnectedThing}/>。

未完 待更新

---

9. 静态路由

静态路由

React Router的以前版本使用静态路由来配置应用程序的路由。这允许在呈现之前检查和匹配路由。由于v4转移到动态组件而不是路由配置，以前的一些用例变得不那么明显和棘手。

我们正在开发一个包来处理静态路由配置和React路由器，以继续满足这些用例。它正在开发中，但我们希望你能尝试一下，并提供帮助。

路由配置链接 点击跳转：React router config