面试 - react路由组件 - 跳转原理 - 2种路由 - 3种传参方式

import React, { Component } from "react";
import { BrowserRouter, Link, Switch, Route, Redirect } from "react-router-dom";
import About from "./pages/About";
import Main from "./pages/Main"; //路由组件，放在pags文件夹
export default class App extends Component {
render() {
return (
<div className="flex-row-center">
<BrowserRouter>
<div style={{ marginRight: 20 }}>
{/* ----------------------传params参数------------------------- */}
<Link to="/about/hguan/18">About</Link>
{/* ----------------------传search参数------------------------- */}
<Link to="/main/?name=hguan&age=18">Main</Link>
{/* ----------------------传state参数-------------------------- */}
<Link
to={{ pathname: "/about", state: { name: "hguan", age: 18 } }}
></Link>
</div>
<div>
<Switch>
{/* ====================声明接收params参数================== */}
<Route path="/about/:name/:age" component={About} />
{/* ==================search参数无需声明接收================= */}
{/* ================= state参数无需声明接收================== */}
<Route path="/main" component={Main} />
<Redirect to="/main" />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
}
/**
*
”路由跳转“ 的工作原理：就是对history历史记录进行操作
*
push模式
将路径压入history栈，留痕 ------- 默认
*
(1).声明式导航：<Link to="/test" />
*
(2).编程式导航：this.props.history.push("/test");
*
*
replace模式
切换路由时替换路径，无痕
*
(1).声明式导航：<Link replace to="/test" />
*
(2).编程式导航：this.props.history.replace("/test");
*/
/**
*
路由组件传参：
*
方法一.
传递params参数：
*
*
（1）传参：
*
声明式导航：<Link to="/about/hguan/26">关于</Link>
*
编程式导航： this.props.history.push("/about/hguan/26");
*
（2）声明：<Route path="/about/:name/:age" component={About} />
*
（3）组件接收： const {name,age} = this.props.match.params
格式为对象{name:hguan,age:18}
*
(在ReactRouter6里：const {name,age}=useParams())
*
方法二： 传递search参数：
*
*
（1）传参：
*
声明式导航：<Link to="/about/?name=hguan&age=26" >关于</Link>
*
编程式导航： this.props.history.push("/about/?name=hguan&age=26");
*
（2）声明：(无需声明，正常注册即可) <Route path="/about" component={About} />
*
（3）组件接收： const urlStr = this.props.location.search
格式为字符串‘?name=hguan&age=26’
*
const {name,age}=qs.parse(urlStr.slice(1));
*
(在ReactRouter6里：const [search,setSearch]=useSearchParams();search.get('name'))
*
*
>>> 补充：这种key=value&key=value的编码形式叫做urlencoded编码;
*
import qs from "qureystring";（脚手架自带）
*
qs.stringify(对象)
//将对象转为urlencoded编码
*
qs.parse(urlencoded编码)
//将urlencoded编码转为对象
*
*
方法三： 传递state参数：
*
*
（1）传参：
*
声明式导航：<Link to={{ pathname: "/about", state: { name: "hguan", age: 26 } }}>关于</Link>
*
编程式导航： this.props.history.push("/about",{ name: "hguan", age: 26 });
*
（2）声明：(无需声明，正常注册即可) <Route path="/about" component={About} />
*
（3）组件接收：
const {name,age} = this.props.location.state
格式为对象{name:hguan,age:26}
*
(在ReactRouter6里：const {state:{name,age}}=useLocation())
*/

最后

以上就是过时期待为你收集整理的面试 - react路由组件 - 跳转原理 - 2种路由 - 3种传参方式的全部内容，希望文章能够帮你解决面试 - react路由组件 - 跳转原理 - 2种路由 - 3种传参方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。