react使用路由react-router-dom v6及三种传参方式

安装react-router-dom

npm i react-router-dom

根目录新建Router.js

import Login from \'./views/login\'
import Layout from \'./views/layout\'
import { Component } from \'react\'
import { Route, BrowserRouter, Routes } from \'react-router-dom\'
class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
                  // exact完全匹配路由
            <Route exact path=\"/\" element={<Layout/>} />
            <Route exact path=\"/login\" element={<Login/>} />
        </Routes>
      </BrowserRouter>
    )
  }
}
export default Router

index.js修改

import React from \'react\';
import ReactDOM from \'react-dom/client\';
import Router from \'./Router\'

const root = ReactDOM.createRoot(document.getElementById(\'root\'));
root.render(
  <React.StrictMode>
    <Router/>
  </React.StrictMode>
);

路由跳转

import {Link} from \'react-router-dom\';
const App = () => {
    return(
        <div>
            <Link to=\"/loign\">去登录</Link>
        </div>
    )
}
export default App;

路径传参

// 注册路由
<Route exact path=\"/user/:uid\" element={<user/>} />
// 路由跳转
<Link to=\"/user/10\">个人中心</Link>
// 接收参数
import { useParams } from \'react-router-dom\';
const User = () => {
  const params = useParams();
  return (
    <div>
        { params.uid }
    </div>            
  )
}
export default User;

在6.X版本中接收参数需要使用useParams来接收，而useParams只能在函数组件使用；

而在类组件中使用this.props.match.params尝试，props打印出空对象！！！

问号传参

// 注册路由
<Route exact path=\"/user\" element={<user/>} />
// 路由跳转
<Link to=\"/user?uid=10\">个人中心</Link>
// 接收参数
import { useLocation } from \'react-router-dom\';
import qs from \'query-string\';
const User = () => {
  let query = useLocation();
  console.log(query);
  // {pathname: \'/test/\', search: \'?uid=1\', hash: \'\', state: null, key: \'default\'}
  // 此时需要借助插件query-string将search转为对象
  query = qs.parse(query.search);
  return (
    <div>
        { query.uid }
    </div>            
  )
}
export default User;

state传参

// 注册路由
<Route exact path=\"/user\" element={<user/>} />
// 路由跳转
<Link to=\"/user\" state={{ uid: 10 }}>个人中心</Link>
// 接收参数
import { useLocation } from \'react-router-dom\';
const User = () => {
  let state= useLocation().state;
  return (
    <div>
        { state && state.uid }
    </div>            
  )
}
export default User;

备注：state传参方式刷新后参数不会丢失；

但从URL上直接输入路由打开页面，state不存在；

使用时一定记得判断是否存在