react router使用方法

react-router可以让跟组件动态的去挂载不同的其它组件，根据用户访问的地址动态的加载不同的组件

一、react路由配置

1、找到react router官方文档
2、安装rect-router-dom

 npm install react-router-dom —-save

3、找到项目的跟组件，引入rect-router-dom

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

4、配置路由
exact表示严格匹配

组件要提前引入

import './App.css';
import { BrowserRouter ,Link,Route } from "react-router-dom"
import About from './components/About'
import Home from './components/Home'
import New from './components/New'

function App() {
  return (
    <BrowserRouter>
      <div>
        <div className="header">
            <Link className="link" to="/"> 首页</Link>
        </div>
        <div className="header">
            <Link className="link" to="/New"> 新闻</Link>
        </div>
        <div className="header">
            <Link className="link" to="/About"> 关于</Link>
        </div>     
        
        <hr />
        <Route exact path="/" component={Home}></Route>
        <Route  path="/new" component={New}></Route>
        <Route  path="/about" component={About}></Route>
      </div>
    </BrowserRouter>
  );
}

export default App;

二、动态路由
5、一个页面跳转到另一个页面进行传值
（1）get传值
1 、获取 this.props.location.seach
（2）动态

<Link className="link" to={`/About/${item.id}`}> 关于</Link>

获取动态路由加载的组件里面获取传值 this.props.match

三、路由嵌套
在配置二级路由时，一级路由中的exact属性要删掉，否则二级路由无法访问，是个空白页

import React from "react"
import { Link,Route } from "react-router-dom"
import '../style.css'
import Info from './Home/Info'   //直接在该文件中引用，不用在app.js中引入
import Main from './Home/Main'

export default function Home(){
    return (
        <div className="contentList">
        <ul className="leftList">
            <li className="list">
                <Link className="link" to="/Home/"> 用户信息</Link>
            </li>
            <li className="list">
                <Link className="link" to="/Home/Main"> 个人中心</Link>
            </li>
        </ul>
        <div className="rightContent">
            <Route exact path="/Home/" component={Info}></Route>
            <Route path="/Home/Main" component={Main}></Route>
        </div>
    </div>
    )
}

四、路由模块化
将路由抽离出来，放在一个数组中或单独放在router.js文件中，然后将routes暴露出来

import './index.css';
import { BrowserRouter ,Link,Route } from "react-router-dom"
import About from './components/About'
import Home from './components/Home'
import New from './components/New'
import NewsContent from './components/NewsContent'


function App() {
  let routes = [
    {
        path:'/Home',
        component:Home,
        exact:true
    },
    {
        path:'/New',
        component:New
    },
    {
      path:'/About',
      component:About
    }
  ]
  return (
    <BrowserRouter>
      <div>
        <div className="header">
            <Link className="link" to="/Home"> 首页</Link>
        </div>
        <div className="header">
            <Link className="link" to="/New"> 新闻</Link>
        </div>
        <div className="header">
            <Link className="link" to="/About"> 关于</Link>
        </div>     
        <hr style={{margin:0}}/>
        {
            routes.map((item , index) => {
              // return <Route key={index} path={item.path} component={item.component}></Route>
                if(item.exact){
                    return <Route exact key={index} path={item.path} component={item.component}></Route>
                }else{
                    return <Route key={index} path={item.path} component={item.component}></Route>
                }
            })
        }
      </div>
    </BrowserRouter>
  );
}

export default App;

五、模块化路由嵌套

App.js文件

import './index.css';
import { BrowserRouter ,Link,Route, Router } from "react-router-dom"
import  routes  from './router'

function App() {
  return (
    <BrowserRouter>
      <div>
        <div className="header">
            <Link className="link" to="/Home"> 首页</Link>
        </div>
        <div className="header">
            <Link className="link" to="/New"> 新闻</Link>
        </div>
        <div className="header">
            <Link className="link" to="/About"> 关于</Link>
        </div>     
        <hr style={{margin:0}}/>
        {
            routes.map((route , key) => {
              // return <Route key={index} path={item.path} component={item.component}></Route>
                // if(route.exact){
                //   return <Route exact key={key} path={route.path} 
                //   render={
                //     props => (
                //       <route.component {...props} routes={route.routes} />
                //     )
                //   } />
                // }else{
                  return <Route key={key} path={route.path} render={
                    props => (
                      <route.component {...props} routes={route.routes} />
                    )
                  } />
                // }
            })
        }
      </div>
    </BrowserRouter>
  );
}

export default App;

Router.js文件

import About from './components/About'
import Home from './components/Home'
import New from './components/New'
import NewsContent from './components/NewsContent'
import Info from './components/Home/Info'
import Main from './components/Home/Main'

let routes = [
    {
        path:'/Home',
        component:Home,
        routes:[
            {
                path:'/Home/Info',
                component:Info
            },
            {
                path:'/Home/Main',
                component:Main
            },
        ]
    },
    {
        path:'/New',
        component:New
    },
    {
      path:'/About',
      component:About
    }
]

export default routes

Home.js文件

import React from "react"
import { Link,Route } from "react-router-dom"
import '../style.css'
import Info from './Home/Info'
import Main from './Home/Main'

export default function Home(props){
    console.log('props',props)
    return (
        <div className="contentList">
        <ul className="leftList">
            <li className="list">
                <Link className="link" to="/Home/Info"> 用户信息</Link>
            </li>
            <li className="list">
                <Link className="link" to="/Home/Main"> 个人中心</Link>
            </li>
        </ul>
        <div className="rightContent">
            {/* <Route exact path="/Home/" component={Info}></Route>
            <Route path="/Home/Main" component={Main}></Route> */}
            {
                props.routes.map((route,key) => {
                    return <Route key={key} path={route.path} component={route.component}></Route> 
                })
            }
        </div>
    </div>
    )
}

withRuoter 的使用
可使组件获取当前路由对象

import React from "react";
import { withRouter } from "react-router-dom";
function Test(props) {
  console.log(props, "------woshitest");
  return <div>Test</div>;
}
Test = withRouter(Test);
export default function News(props) {
  console.log(props, "woshi new");
  const fun = () => {
    props.history.push("/about");
  };
  return (
    <div>
      <Test />
      <button onClick={fun}>click</button>
    </div>
  );
}

Link

<Button type="secondary" size='small'  >
    <Link to={{ pathname: '/base/strategyList',search:id+'', query: {sceneId:id,record:record} }}>查看</Link>
   </Button>&nbsp;

获取值

  componentDidMount() {
    const {dispatch,location}=this.props;
 
    let recvParam;
 
    if(location.query&&location.query.record){//判断当前有参数
      recvParam=location.query.record;
      sessionStorage.setItem('data',recvParam);// 存入到sessionStorage中
    }else{
      recvParam=sessionStorage.getItem('data');// 当state没有参数时，取sessionStorage中的参数
    }
 
    this.setState({
      recvParam
    })
 
    console.log("recvParam",recvParam)
  }

事件触发型

第一种：
A页面 传参数
this.props.history.push{
pathname:’/router/url/send’,
query:{
“oneFlag”:one,
…
}
}
B页面 接收参数
this.props.location.query.oneFlag // one
…
路由路径显示：‘#/router/url/send/oneFlag?one’
 
第二种：
A页面 传参数
this.props.history.push{
pathname:’/router/url/send’,
state:{
“oneFlag”:one,
…
}
}
B页面 接收参数
this.props.location.state.oneFlag // one