React路由篇:路由跳转以及带参的三种方式(react-router-dom声明式路由)

当查询信息,总有需要带上参数才能精准查询到自己想要的信息.
举个例子:
我要查询类别为笔记的的备忘录信息时,查询时需要带上t_event_noteClassify=“笔记”;

代码目录结构

Ⅰ-params参数

路由声明格式

//路由链接(携带参数)：
<Link to='/index/first/lin/922333333'}>详情</Link>

//注册路由(声明接收)：
<Route path="/index/first/:name/:userid" component={First}/>

路由跳转的效果

src\components\HeadNav\index.tsx

import React from 'react';
import { Route, NavLink, Switch } from 'react-router-dom';
import './index.css';
import First from '../../views/First';
import Two from '../../views/Two';
import Three from '../../views/Three';
import Four from '../../views/Four'


export default function HeadNav(props: any) {
  const params = {
    name: 'lin',
    userid: '9012222222222e'
  }
  return (
    <>
      <ul>
        <li>
          <NavLink to={`/index/first/${params.name}/${params.userid}`} activeClassName='selectedHead'>首页</NavLink>
        </li>
        <li>
          <NavLink to='/index/two' activeClassName='selectedHead'>二页</NavLink>
        </li>
        <li>
          <NavLink to='/index/three' activeClassName='selectedHead'>散页</NavLink>
        </li>
        <li>
          <NavLink to='/index/four' activeClassName='selectedHead'>肆页</NavLink>
        </li>
      </ul>
      <Switch>
        <Route path='/index/first/:name/:userid' component={First}></Route>
        <Route path='/index/two' component={Two}></Route>
        <Route path='/index/three' component={Three}></Route>
        <Route path='/index/four' component={Four}></Route>
      </Switch>
    </>
  )
}

src\views\First\index.tsx

跳转至的组件(First)接收参数如下

props.match.params

Ⅱ-search参数

路由声明格式

//路由链接(携带参数)：
<Link to={`/index/two?name=${params.name}&userid=${params.userid}`}>详情</Link>
//注册路由(无需声明，正常注册即可)：
<Route path="/index/two" component={First}/>

路由跳转的效果

src\components\HeadNav\index.tsx

src\views\Two\index.tsx

export default function First(props:any){
  console.log('two', props);
  
  return(
    <h2>Two组件</h2>
  )
}

跳转至的组件(Two)接收参数如下

props.location
props.location.search

Ⅲ-state参数

路由声明格式

//路由链接(携带参数)：
<Link to={{pathname:/index/three',state:{name:params.name,userid:params.userid}}}>详情</Link>

//注册路由(无需声明，正常注册即可)：
<Route path="/demo/test" component={Three}/>

路由跳转的效果

src\components\HeadNav\index.tsx

src\views\Three\index.tsx

export default function Three(props:any){
  console.log('三组件', props);
  
  return(
    <>
    <h2>这是Ⅲ页</h2>
    </>
  )
}

跳转至的组件(Three)接收参数如下

props.location
props.location.state

以上便是路由的跳转传参的三种方式.针对的是声明是路由.