React-Router5和React-Router6的简单使用

一、V5版本

1、界面中使用路由

import React from 'react';
import {HashRouter,Link,Switch,Route,Redirect} from "react-router-dom";
import Vote from "./views/Vote";
import Demo from './views/Demo';
import Personal from "./views/Personal";
const App=function App(){
    return <HashRouter>
       <div>
           <Link to='/'>首页</Link>
       </div>
        <div className="content">
            <Switch>
                <Route path="/" exact component={Vote} />
                <Route path="/demo" component={Demo} />
                <Route path="/personal" component={Personal} />
                <Redirect to="/"/>
            </Switch>
        </div>
    </HashRouter>
};
export default App;

//二级路由中的写法，NavLink标签会为当前匹配路由添加"active"类名，我们可以通过activeClassName来更改它的默认类名
const Personal=function Personal(){
  return <>
    <div className='menu'>
      <NavLink to="/personal/order" activeClassName='routeActive'>我的订单</NavLink>
      <NavLink to="/personal/profile" activeClassName='routeActive'>我的信息</NavLink>
    </div>
    <div className='content'>
      <Switch>
        <Redirect exact from="/personal" to="/personal/order" />
        <Route path="/personal/order" component={MyOrder} />
        <Route path="/personal/profile" component={MyProfile} />
      </Switch>
    </div>
  </>
};
export default Personal;

2、路由传参

问号传参

不安全，有长度限制；在目标路由刷新页面，传递的信息也在。

//标签跳转传参
<NavLink to={{
  pathname:'/personal/profile',
  search:'?lx=0&name=test'
}}>标签跳转传参</NavLink>

//编程式导航传参，先从props中解构出history
const {history}=props;
history.push({
  pathname:'/personal/profile',
  search:'lx=0&name=test'
})

//目标组件接收问号传参信息
//基于qs处理
import qs from 'qs';
let {location}=props;
let search=qs.parse(location.search.slice(1))
console.log(search);  //{lx: '0', name: 'test'}
//基于URLSearchParams处理
let {location}=props;
let usp=new URLSearchParams(location.search);
console.log(usp.get('lx'));		//0
console.log(usp.get('name'));	//test
//另外也可以通过hooks函数获取location，其他操作同上
import {useLocation} from "react-router-dom";
const location=useLocation();

路径传参

存在安全和长度限制，目标路由刷新，传递的信息也在。

//首先需要更改path路径
<Route path="/personal/profile/:id?/:name?" component={MyProfile} />

//路由跳转
const {history}=props;
history.push('/personal/profile/0/test');

//目标组件参数接收
//方法一：
const {match}=props;
console.log(match.params);   //{id: '0', name: 'test'}
//方法二：
import {useRouteMatch} from "react-router-dom";
const match=useRouteMatch();
console.log(match.params);	//{id: '0', name: 'test'}
//方法三：
import {useParams} from "react-router-dom";
let params=useParams();
console.log(params);	//{id: '0', name: 'test'}

隐式传参

传递的信息不会在地址中：安全、美观，无长度限制；在目标组件刷新，传递的信息会丢失。

//可以从props中解构history，也可以使用hooks函数
import {useHistory} from 'react-router-dom';
let history=useHistory();
history.push({
  pathname:'/personal/profile',
  state:{
    lx:0,
    name:'aaa'
  }
})

//参数接收，同样可以通过props接收location，同上，不再赘述
import {useLocation} from "react-router-dom";
const location=useLocation();
console.log(location.state);   //{lx: 0, name: 'aaa'}

二、V6版本

1、界面中使用路由

import React from 'react';
import {HashRouter, Routes, Link, Navigate, Route} from "react-router-dom";
import Vote from "./views/Vote";
import Demo from './views/Demo';
import Personal from "./views/Personal";
import MyOrder from "./views/personal/MyOrder";
import MyProfile from "./views/personal/MyProfile";
const App=function App(){
    return <HashRouter>
       <div>
           <Link to='/'>首页</Link>
       </div>
        <div className="content">
            <Routes>
                <Route path="/" element={<Vote/>} />
                <Route path="/demo" element={<Demo/>} />
                <Route path="/personal" element={<Personal/>}>
                    <Route path="/personal" element={<Navigate to="/personal/order"/>} />
                    <Route path="/personal/order" element={<MyOrder/>} />
                    <Route path="/personal/profile/:id?/:name?" element={<MyProfile/>} />
                </Route>
                <Route path="*" element={<Navigate to={{
                    path:'/',
                    search:'?lx=404'
                }}/>
                } />
            </Routes>
        </div>
    </HashRouter>
};
export default App;

//使用到二级路由的组件中添加Outlet
import { Outlet,NavLink} from "react-router-dom";
const Personal=function Personal(){
  return <PersonalBox>
    <div className='menu'>
      <NavLink to="/personal/order">我的订单</NavLink>
      <NavLink to="/personal/profile">我的信息</NavLink>
    </div>
    <div className='content'>
      <Outlet/>
    </div>
  </PersonalBox>
};
export default Personal;

2、路由传参

问号传参

import {useNavigate} from 'react-router-dom';
import qs from "qs";
const navigate=useNavigate();
//navigate('/personal/profile',{replace:true});
navigate({
  pathname:'/personal/profile',
  search:qs.stringify({
    id:0,
    name:'test'
  })
})

//参数接收
//方法一：
import {useLocation} from 'react-router-dom';
const location=useLocation();
const usp=new URLSearchParams(location.search);
console.log(usp.get('id'))；	//0
//方法二：
import {useSearchParams} from 'react-router-dom';
let [usp]=useSearchParams();
console.log(usp.get('id'));		//0

路径传参

//同样需要在路由的path上先处理
<Route path="/personal/profile/:id?/:name?" element={<MyProfile/>} />

//跳转
import {useNavigate} from 'react-router-dom';
const navigate=useNavigate();
navigate('/personal/profile/0/test');

//参数接收
import {useParams} from 'react-router-dom';
const params=useParams();
console.log(params);	//{id: '0', name: 'test'}

隐式传参

在v6版本中，隐式传参时，目标组件刷新后依然能获取到隐式传参的信息！！

import {useNavigate} from 'react-router-dom';
const navigate=useNavigate();
navigate('/personal/profile',{
 replace:true, //历史记录池替换现有地址
  state:{
    id:0,
    name:'test'
  }
});

//接收参数
import {useLocation} from 'react-router-dom';
const location=useLocation();
console.log(location.state);    //{id: 0, name: 'test'}