React路由传参

params传参

params传参特点：

• 刷新页面后参数不消失,
• 参数会在地址栏显示
• 需要在Route中配置参数名称

路由链接(携带参数)：

//声明式导航
<Link to='/Detail/1'}>详情</Link>
//编程式导航
props.history.push(`/Detail/${id}`)

注册路由(声明接收)：

<Route path="/Detail/:id" component={Detail}></Route>

接收参数：

this.props.match.params

实例：

import React, {useEffect}from 'react'
import "./css/TabBar.css"
import { Redirect, HashRouter as Router, Route, Switch, NavLink } from "react-router-dom"
function IndexRouter(props) {
    return (
        <Router>
            {props.children}
            <Switch>
                <Route path="/Home" render={Home}></Route>
                <Route path="/Detail/:id" component={Detail}></Route>
                <Redirect from="/" to="/Home" exact></Redirect>
            </Switch>
        </Router>
    )
}
function TabBar() {
    return (
        <div className='tabbar'>
            <NavLink to={{
                pathname: "/Home",
                search: '?sort=name',
                hash: '#the-hash',
                state: { fromDashboard: true }
            }}>Home</NavLink>
            <NavLink to="/Detail/1">Detail</NavLink>
        </div>
    )
}
function Home(props) {
  console.log(props);
  return (
    <div>Home</div>
  )
}
function Detail(props) {
  useEffect(() => {
      console.log(props.match.params.id);
  }, [])
  return (
      <div>Detail{props.match.params.id}</div>
  )
}
export default function App() {
  return (
    <div>
        <IndexRouter>
            <TabBar/>
        </IndexRouter>
    </div>
  )
}

点击Detail的Link跳转到Detail组件，props.match.params.id获取当前params参数

search传参

路由链接(携带参数)：

<Link to='/Detail?name=tom&id=18'}>详情</Link>

注册路由(无需声明，正常注册即可)：

<Route path="/Detail" component={Detail}/>

接收参数：
(URLSearchParams)

const res =new URLSearchParams(props.location.search.substr(1))
console.log(res.get("id"),res.get("name"));

实例：

import React, {useEffect}from 'react'
import "./css/TabBar.css"
import { Redirect, HashRouter as Router, Route, Switch, NavLink } from "react-router-dom"
function IndexRouter(props) {
    return (
        <Router>
            {props.children}
            <Switch>
                <Route path="/Home" render={Home}></Route>
                <Route path="/Detail" component={Detail}></Route>
                <Redirect from="/" to="/Home" exact></Redirect>
            </Switch>
        </Router>
    )
}
function TabBar() {
    return (
        <div className='tabbar'>
            <NavLink to={{
                pathname: "/Home",
                search: '?sort=name',
                hash: '#the-hash',
                state: { fromDashboard: true }
            }}>Home</NavLink>
            <NavLink to="/Detail?id=1&name=detail">Detail</NavLink>
        </div>
    )
}
function Home(props) {
  console.log(props);
  return (
    <div>Home</div>
  )
}
function Detail(props) {

  useEffect(() => {
      const res =new URLSearchParams(props.location.search.substr(1))
      console.log(res.get("id"),res.get("name"));
  }, [])
  return (
      <div>Detail</div>
  )
}
export default function App() {
  return (
    <div>
        <IndexRouter>
            <TabBar/>
        </IndexRouter>
    </div>
  )
}

备注：获取到的search是urlencoded编码字符串，需要借助URLSearchParams解析

state传参

state传参特点：

• 刷新页面后参数不消失（BrowserRouter）
• 参数不会在地址栏显示

路由链接(携带参数)：

<Link to={{pathname:'/Detail',state:{name:'tom',id:18}}}>详情</Link>

注册路由(无需声明，正常注册即可)：

//声明式导航
<Route path="/Detail" component={Detail}/>
//编程式导航
this.props.router.push({pathname:'/production',state:{name:'tom',id:18}});

接收参数：

this.props.location.state

实例：

import React, {useEffect}from 'react'
import "./css/TabBar.css"
import { Redirect, HashRouter as Router, Route, Switch, NavLink } from "react-router-dom"

function IndexRouter(props) {
    return (
        <Router>
            {props.children}
            <Switch>
                <Route path="/Home" render={Home}></Route>
                <Route path="/Detail" component={Detail}></Route>
                <Redirect from="/" to="/Home" exact></Redirect>
            </Switch>
        </Router>
    )
}
function TabBar() {
    return (
        <div className='tabbar'>
            <NavLink to={{
                pathname: "/Home",
                search: '?sort=name',
                hash: '#the-hash',
                state: { fromDashboard: true }
            }}>Home</NavLink>
            <NavLink to={{pathname:'/Detail',state:{name:'tom',id:18}}}>Detail</NavLink>
        </div>
    )
}
function Home(props) {
  console.log(props);
  return (
    <div>Home</div>
  )
}
function Detail(props) {
  console.log(props.location.state);
  useEffect(() => {
      console.log(props.location.state);
  }, [])
  return (
      <div>Detail</div>
  )
}
export default function App() {
  return (
    <div>
        <IndexRouter>
            <TabBar/>
        </IndexRouter>
    </div>
  )
}

备注：
刷新后对路由的state的影响
BrowserRouter没有任何影响,因为state保存在history对象中
HashRouter刷新后会导致路由state参数的丢失

---