React -router 简单用法

1. 安装依赖

npm install react-router-dom

2. 加载依赖

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

注意： Instead of <a href="/"> we use <Link to="/">

3. 简单使用

import React, { Component } from 'react';
import './App.css'
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>;
    }

class App extends Component {


  render() {
    return (
      <Router>
       <nav>
        <ul>
          <li>
            <Link to ='/'>first</Link>
          </li>
          <li>
            <Link to ='/second'>second</Link>
          </li><li>
            <Link to ='/last'>last</Link>
          </li>
        </ul>
       </nav>
       <Route path="/" exact component={Index} />
        <Route path="/second" component={About} />
        <Route path="/last" component={Users} />
      </Router>
    );
  }
}

export default App;

4. 嵌套路由

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;

5. router 的三种方法

component

component的值是一个组件，当URL和Route匹配时，component属性定义的组件就会被渲染。例如：
<Route path='/foo' component={Foo}>
当URL="http://example.com/foo"时，Foo组件会被渲染

renden

render的值是一个函数，这个函数返回一个React元素。这种方式可以方便地为待渲染的组件传递额外的属性。例如：

<Route path='/foo' render={(props) => (       
<Foo {...props} data={extraProps} />     
)}>

Foo 组件接收了一个额外的data属性。

children

children的值也是一个函数，函数返回要渲染的React元素。与前两种方式不同之处是，无论是否匹配成功，children返回的组件都会被渲染。但是，当匹配不成功时，match属性为null。例如：

<Route path='/foo' children={(props) => (       
<div className={props.match ? 'active' : ''}>         
<Foo />       
</div>     
</Route>

如果Route匹配当前URL，待渲染元素的根节点div的class将被设置成active。

6. match

当URL和Route匹配时，Route会创建一个match对象作为props中的一个属性传递给被渲染的组件。这个对象包含以下4个属性。
（1）params：Route的path可以包含参数，例如<Route path='/foo/:id'>包含一个参数id。params就是用于从匹配的URL中解析出 path中的参数，例如，当URL="http://example.com/foo/1"时，params = {id: 1}。
（2）isExact：是一个布尔值，当URL完全匹配时，值为true；当 URL部分匹配时，值为false。例如，当path="/foo"、 URL="http://example.com/foo"时，是完全匹配；当 URL="http://example.com/ foo/1"时，是部分匹配。
（3）path：Route的path属性，构建嵌套路由时会使用到。
（4）url：URL的匹配部分。

7.switch 和 exact

当URL和多个Route匹配时，这些Route都会执行渲染操作。如果只想让第一个匹配的Route渲染，那么可以把这些Route包到一个Switch组件中。如果想让URL和Route完全匹配时，Route才渲染，那么可以使用 Route的exact属性。Switch和exact常常联合使用，用于应用首页的导航。例如：

<Router>      
<Switch>        
<Route exact path='/' component={Home}/>        
<Route path='/posts' component={Posts}/>        
<Route path='/:user' component={User}/>      
</Switch>     
</Router>

如果不使用Switch，当URL的pathname为"/posts"时，<Route path='/posts' />和<Route path='/:user' />都会被匹配，但显然我们并不希
望<Route path='/:user' />被匹配，实际上也没有用户名为posts的用户。如果不使用exact，"/" "/posts" "/user1"等几乎所有URL都会匹配第一个 Route，又因为Switch的存在，后面的两个Route永远也不会被匹配。使用exact，保证只有当URL的pathname为"/"时，第一个Route才会被匹配。

了解更多

React- router 简单用法