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 
            
            
            
                   
            
        
    }
}
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 

            点击我去A页面
            点击我去B页面(设置了参数)
            点击我去C页面
            测试404
            测试跳转
            通过js方法跳转到B页面
            去c页面(通过state传参)
            点击我去C页面，并且通过query传参
        
    }
}
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(
,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