!
也想出现在这里? 联系我们
广告位

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不存在;

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

给TA打赏
共{{data.count}}人
人已打赏
编程技术

react-router-dom v6使用useNavigate跳转

2022-9-28 20:40:45

编程技术

react使用styled-components做css的私有化

2022-9-28 20:41:22

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 admin@s9h.cn 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索