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种传参方式
于 2022-08-24 19:19:06 首次发布