Article directory
foreword
This article will record how to pass routing parameters in react routing, and how to conduct centralized management of routing
routing parameters
1. Use :id to pass parameters:
<BrowserRouter>
<ul>
<li><Link to='/user/:id'>用户中心</Link></li>
<li><Link to='/userinfo'>用户信息</Link></li>
<li><Link to='/userdetail'>用户详情</Link></li>
</ul>
<Switch>
<Route path='/user/:id' exact component={
User} />
<Route path='/userinfo' component={
UserInfo} />
<Route path='/userdetail' component={
UserDetail} />
</Switch>
</BrowserRouter>
render id with props
class User extends Component {
render() {
console.log(this.props)
return (
<div>
<h1>用户中心</h1>
<p>{
this.props.match.params.id}</p>
</div>
)
}
}
See the effect:
2. Route splicing parameters to pass parameters
Pay attention to the link label wrapped outside the user information
<BrowserRouter>
<ul>
<li><Link to='/user/:id'>用户中心</Link></li>
<li><Link to='/userinfo?name=weiwei&age=18'>用户信息</Link></li>
<li><Link to='/userdetail'>用户详情</Link></li>
</ul>
<Switch>
<Route path='/user/:id' exact component={
User} />
<Route path='/userinfo' component={
UserInfo} />
<Route path='/userdetail' component={
UserDetail} />
</Switch>
</BrowserRouter>
Use querystring to parse the value of the url parameter, install and import before using querystring
class UserInfo extends Component {
render() {
console.log(querystring.parse(this.props.location.search))
let {
name, age} = querystring.parse(this.props.location.search)
return (
<div>用户信息
<h2>用户姓名：{
name}</h2>
<h2>用户年龄：{
age}</h2>
</div>
)
}
}
Check the effect:
3. Passing parameters in object form
This method is recommended, it does not expose parameters and can pass many values, which is more convenient
. Pay attention to the link of user details, write the object directly in it, pathname to write the address, and pass the object parameters in the state.
<BrowserRouter>
<ul>
<li><Link to='/user/:id'>用户中心</Link></li>
<li><Link to='/userinfo?name=weiwei&age=18'>用户信息</Link></li>
<li><Link to={
{
pathname: '/userdetail', // 跳转的路径
// search: 'name=hello-world'
state: {
name: 'hahaha', age: 12}
}
}>用户详情</Link></li>
</ul>
<Switch>
<Route path='/user/:id' exact component={
User} />
<Route path='/userinfo' component={
UserInfo} />
<Route path='/userdetail' component={
UserDetail} />
</Switch>
</BrowserRouter>
class UserDetail extends Component {
render() {
console.log(this.props)
let {
name, age} = this.props.location.state
return (
<div>用户详情
<h2>用户姓名：{
name}</h2>
<h2>用户年龄：{
age}</h2>
</div>
)
}
}
See the effect:
Routing centralized management
During the study, we will find that the routing in react is relatively scattered, so is there a way to centrally manage the routing?
Here you need to use the routing manager react-router-config, you need to install it before using it,
and then import it and you can use it, {renderRoutes(routes)}
import React, {
Component } from 'react'
import {
BrowserRouter, Link} from 'react-router-dom'
import routes from './07router'
import {
renderRoutes} from 'react-router-config'
export class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<ul>
<li><Link to='/'>主页</Link></li>
<li><Link to='/about'>关于</Link></li>
<li><Link to='/user'>用户中心</Link></li>
</ul>
{
renderRoutes(routes)}
</BrowserRouter>
</div>
)
}
}
export default App
Create a new file for routing related configuration:
import Home from '../01pages/home'
import About from '../01pages/about'
import User from '../01pages/user'
const routes = [
{
path: '/',
exact: true,
component: Home
},
{
path: '/home',
exact: true,
component: Home
},
{
path: '/about',
component: About
},
{
path: '/user',
component: User
}
]
export default routes
This enables centralized processing of routing
Sub-Router of Centralized Route Management
If you want to implement a route that includes sub-routes, how to implement it?
See below
import React, {
Component } from 'react'
import {
BrowserRouter, Link} from 'react-router-dom'
import routes from './08router'
import {
renderRoutes} from 'react-router-config'
export class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<ul>
<li><Link to='/'>主页</Link></li>
<li><Link to='/about'>关于</Link></li>
<li><Link to='/about/son'>关于儿子</Link></li>
<li><Link to='/user'>用户中心</Link></li>
</ul>
{
renderRoutes(routes)}
</BrowserRouter>
</div>
)
}
}
export default App
Here you also need to create a new file to write the content of son:
import React, {
Component } from 'react'
export class Son extends Component {
render() {
return (
<div>我是关于的Son</div>
)
}
}
export default Son
The same new file is centrally managed, and the sub-route is wrapped in another layer in routes:, see about the following
// 在这里进行路由的相关配置
import Home from '../01pages/home'
import About from '../01pages/about'
import User from '../01pages/user'
import Son from './son'
const routes = [
{
path: '/',
exact: true,
component: Home
},
{
path: '/home',
exact: true,
component: Home
},
{
path: '/about',
component: About,
routes: [
{
path: '/about/son',
exact: true,
component: Son
}
]
},
{
path: '/user',
component: User
}
]
export default routes
Check the effect:
Well, this article is over here. If it is helpful to you, you can like, follow and support~~
I will bring more front-end knowledge content in the future.