react路由传参方式总结

目录

路由传参方式

1、向路由传递params参数

2、传递search参数

3、传递state参数

总结：

编程式路由导航（声明接收和接收方式和上方相同）

 其它：

1、默认选中（重定向）

 2、BrowserRouter和HashRouter的区别：（常用BrowserRouter）

---

 

路由传参方式

1、向路由传递params参数

 

接收params参数

 

2、向路由传递search参数

传递参数：

无须声明接收

接收search参数（截取问号，转成对象）

 下方图片是v5版本的引入方法：

v6版本引入方法，使用方法和v5相同：

npm i query-string

import qs from 'query-string'

querystring：把一个对象转成urlcode编码格式：key=value&key=value

parse：把urlcode编码格式转化成对象

带问号的时候：qs.parse(search.slice(1))

3、向路由传递state参数

传递参数：

无须声明接收

接收参数：

 

总结：

 

编程式路由导航（声明接收和接收方式和上方相同）

replace不留下痕迹，push留下痕迹

 onClick点击：

 

 其它：

1、默认选中（重定向）

v6版本：<Route path="/" element={< Navigate replace to="/about" />} />

v5版本：

        <Switch>
           <Route path='/login' component={Login}/>
           <Route path='/admin' component={Admin}/>
           <Redirect from='/' to="/login"/>
        </Switch>

 2、BrowserRouter和HashRouter的区别：（常用BrowserRouter）