react-router使用示例

1：首先在项目中引入模块

npm install --save react-router react-router-dom

2：然后新建一个文件，专门用来设置整个项目所用的路由，我这里叫router.js,在这个文件里引入想要配置路由的组件，给组件设置名称

import './index.css'
import React,{Component} from 'react';
import Nava from './nav/testa';
import Navb from './nav/testb';
import Navc from './nav/testc';
import Error from './nav/error';
import {Route,Switch,Redirect} from 'react-router-dom';

class Allrouter extends Component{
    render(){
        return <Switch>
            <Route exact path="/" component={Nava} />
            <Route  path="/Navb/:name" component={Navb} />
            <Route  path="/Navc" component={Navc} />
            <Redirect from="/redirect" to="/Navb" />       
            <Route component={Error} />
        </Switch>
    }
}
export default Allrouter;

3：给组件设置好路由名称以后开始使用路由，这里声明了一个导航组件Nav，用以验证各种方式的路由跳转，

 

import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import { withRouter } from 'react-router-dom';
//link标签用来跳转，其中to是要跳转的路由，路由时在路由文件（这里时allRouter）中定义的
class Nav extends Component{
    constructor (props){
        super(props);
        this.handleClick=this.handleClick.bind(this);
        this.goToc=this.goToc.bind(this);
        this.state={
            name:'xuelanDing',
            age:18
        }
    }
    handleClick(){
        console.log(this.props)
        this.props.history.push(`/Navb/${this.state.name}`)
    }
    goToc(){
        this.props.history.push({pathname:'/Navc',query:{name:'xuelanDing',age:19}})
    }
    render(){
        let name = this.state.name;
        return <div className="navList">
            <Link   to='./'>点击我去A页面</Link>
            <Link to={'/Navb/' + name}>点击我去B页面(设置了参数)</Link>
            <Link to='/Navc'>点击我去C页面</Link>
            <Link to='/test'>测试404</Link>
            <Link  to='/redirect'>测试跳转</Link>
            <button onClick={this.handleClick}>通过js方法跳转到B页面</button>
            <Link to={{pathname:'/Navc',state:{name:'xuelanDing',price:20}}}>去c页面(通过state传参)</Link>
            <button onClick={this.goToc} style={{paddingLeft:'20px'}}>点击我去C页面，并且通过query传参</button>
        </div>
    }
}
export default withRouter(Nav);

 4：挂载Nav组件，index.js如下

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import Routercomponent from './router';
import Nav from './nav/Nav'
ReactDOM.render(<Router><Nav /><Routercomponent /></Router>,document.getElementById('root'))

总结：

1：传参如果是在path后面设置路径，可以通过link和this.props.history.push来跳转，且必须传参，且会在地址栏显示

接收此种方式参数的方式是 this.props.match.params.XX

 

2：跳转到一个页面可以通过query携带参数，不在地址栏显示，但刷新参数消失

接收此种传参方式的参数的方式是 this.props.location.query

 

3：通过link的state传参，不在地址栏显示，且刷新不消失

接收此种传参方式的参数 this.props.location.state