React-Router用法详解

本文将讨论如何在react项目中使用React-Router实现路由切换。（使用的React-Router是4.0版本）。

在react中安装React-Router

//如果你使用yarn
yarn add react-router-dom
//如果你使用npm
npm install react-router-dom

完整代码

import React, { Component ,Fragment} from 'react';
import './App.css';
import {NavLink,Link,Redirect,Switch,Route, BrowserRouter as Router} from 'react-router-dom'
const Index = () => <h2>Home</h2>;
//配置子路由
const About = () => <div>
                        <h2>About</h2>
                        <Link to="/about/tomoto">tomoto</Link>
                        <Link to="/about/apple">apple</Link>
                        <Switch>
                            <Route path="/about/tomoto" rende={()=><h2>tomoto</h2>}></Route>
                            <Route path="/about/apple" rende={()=><h2>apple</h2>}></Route>
                        </Switch>
                    </div>;
const Mine = () => <h2>Mine</h2>;
const Notfound = () => <h2>Notfound</h2>;
class App extends Component {
  render() {
    return (
      <div className="App">
      {/*要有Router容器包裹  */}
      <Router>
         <div>
            <Link to="/home">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/mine">Mine</Link>
             {/* Switch只能匹配到一个Route */}
            <Switch>
                {/*exact 是完全匹配才可以  */}
                <Route path="/" exact component={Index}></Route>
                <Route path="/home" component={Index}></Route>
                <Route path="/about" component={About}></Route>
                <Route path="/mine" component={Mine}></Route>
                <Route path="/notfound" component={Notfound}></Route>
                 {/*匹配不到就重定向到404页面  */}
                <Redirect to ={{pathname:'/notfound'}}/>>
            </Switch>
          </div>
      </Router>
      </div>
    );
  }
}

export default App;

解析：

1. Switch只能匹配到一个Route
2. exact 是完全匹配才可以
3. Router组件本身只是一个容器，真正的路由要通过Route组件定义
4. Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是<a>元素的React 版本，可以接收Router的状态。
5. 路由模式和哈希模式

import {BrowserRouter as Router} from 'react-router-dom' //history模式

import {hashHistory as Router} from 'react-router-dom' //哈希模式

路由传参

下面的例子介绍了params和query的传参方式，写在了一个例子里面。

Router中的配置

<Route path="/mine/:id" component={Mine}></Route>

传参：

import qs from 'querystring' 
<Link to={{
              pathname:"/mine/2",
              search:'?'+qs.stringify(query)
            }}>Mine</Link>

接收参数：

import qs from 'querystring'
import urlObj from 'url'

const Mine = (props) => {
  let{name,age}=urlObj.parse(props.location.search,true).query
  return (
    <h2>
      {props.match.params.id}----
      name:{name}----
      age:{age}
    </h2> 
    )
};

state参数  

定义路由：<Route path='/user' component={UserPage}></Route>(无需做多余的配置)

var data = {id:3,name:sam,age:36};

var path = { pathname:'/user', state:data, }

使用1.<Link to={path}>用户</Link>

2.hashHistory.push(path);

获取数据 var data = this.props.location.state; var {id,name,age} = data;

注意: state传参不会显示在地址栏中，只保存在this.props中。刷新就会变成undefined

在React-Router实现Tag封装，我实现了Link的tag封装，使用React-Router就可以像Vue-router一样实现tag指定生成元素，而不是<a>标签了