前言
React Router 是 React 应用中常用的路由管理库，而 URL 参数则是它的一个关键概念。URL 参数允许您在路由之间传递数据，从而使您的应用程序更灵活和交互性更强。
路由参数传递
- URL 参数，例如：?key=value&key=value
更改 App.js 的 Home 组件的路由跳转规则：
import React from 'react'; import Home from './components/Home' import About from './components/About' import Other from './components/Other' import User from './components/User' import Login from './components/Login' import Discover from './components/Discover' import {NavLink, Route, Switch, withRouter} from 'react-router-dom'; class App extends React.PureComponent { render() { return ( <div> <NavLink to={'/home?name=yangbuyiya&age=18'} activeStyle={{color: 'red'}}>Home</NavLink> <NavLink to={'/about'} activeStyle={{color: 'red'}}>About</NavLink> <NavLink to={'/user'} activeStyle={{color: 'red'}}>User</NavLink> <NavLink to={'/discover'} activeStyle={{color: 'red'}}>广场</NavLink> <button onClick={() => { this.btnClick() }}> 广场 </button> <Switch> <Route exact path={'/home'} component={Home}/> <Route exact path={'/about'} component={About}/> <Route exact path={'/user'} component={User}/> <Route exact path={'/login'} component={Login}/> <Route path={'/discover'} component={Discover}/> <Route component={Other}/> </Switch> </div> ) } btnClick() { this.props.history.push('/discover'); } } export default withRouter(App);
更改 Home.js 组件的内容，处理 URL 传递过来的参数：
import React from 'react'; class Home extends React.PureComponent { constructor(props) { super(props); let query = this.props.location.search.substring(1); query = query.split('&'); let obj = {}; query.forEach((item) => { let temp = item.split('='); obj[temp[0]] = temp[1]; }); console.log(obj); } render() { return ( <div>Home</div> ) } } export default Home;
- 路由参数(动态路由)，例如：/path/:key
更改 App.js:
<NavLink to={'/about/yangbuyiya/18'} activeStyle={{color: 'red'}}>About</NavLink>
更改 About.js:
import React from 'react'; class About extends React.PureComponent { constructor(props) { super(props); console.log(this.props.match); console.log(this.props.match.params); } render() { return ( <div>About</div> ) } } export default About;
- 对象
更改 App.js:
render() { const obj = { name: 'yangbuyiya', age: 18, gender: 'man' }; return ( <div> <NavLink to={'/home?name=yangbuyiya&age=18'} activeStyle={{color: 'red'}}>Home</NavLink> <NavLink to={'/about/yangbuyiya/18'} activeStyle={{color: 'red'}}>About</NavLink> <NavLink to={{ pathname: '/user', search: '', hash: '', state: obj }} activeStyle={{color: 'red'}} > User </NavLink> <NavLink to={'/discover'} activeStyle={{color: 'red'}}>广场</NavLink> <button onClick={() => { this.btnClick() }}> 广场 </button> <Switch> <Route exact path={'/home'} component={Home}/> <Route exact path={'/about/:name/:age'} component={About}/> <Route exact path={'/user'} component={User}/> <Route exact path={'/login'} component={Login}/> <Route path={'/discover'} component={Discover}/> <Route component={Other}/> </Switch> </div> ) }
更改 User.js:
constructor(props) { super(props); this.state = { isLogin: true } console.log(this.props.location); console.log(this.props.location.state); }
官方文档地址：https://reactrouter.com/web/api/Link
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
