1. 路由环境配置
- 下载安装 react-router-dom v5 版本
如果当前 react-router-dom 版本 是 v6 的，需要卸载
npm uninstall react-router-dom
安装 v5 版本
npm install react-router-dom@5.1.2 -S
- 在入口 index.js 引入，并使用路由模式组件包裹根组件
根据需求选择 HashRouter 还是 BrowserRouter，默认是 BrowserRouter
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
拓展：
路由模式
hash 模式： HashRouter
histroy 模式： BrowserRouter
其中 hash 模式 url 路径上显示 # ，histroy 模式需要后端配合配置
2. 路由跳转的几种方式
1. Link、NavLink
在 App.js 中，通过 Link 或者 NavLink 组件，进行导航跳转
import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
return (
<div>
<div>
{/* link 导航 */}
{/* 也使用 NavLink，相比link 它多了一个点击时的 active 类，可以设置点击时样式 */}
<Link to="/child1">Link: go to child1</Link> |{" "}
<Link to="/child2">Link: go to child2</Link>
</div>
<div>
{/* 定义路由出口 */}
<Switch>
{/* 根组件默认展示，要添加 exact 属性，防止二次渲染 */}
{/* <Route path="/" component={Child1} exact />*/}
{/* 路由重定向 */}
<Redirect from="/" to="/child1" exact />
<Route path="/child1" component={Child1} />
<Route path="/child2" component={Child2} />
</Switch>
</div>
</div>
);
}
export default App;
2. this.props.history.push() 路由跳转
- 在函数组件中
通过 withRoute 高阶组件，使得函数组件的参数 props 拥有 location、match、history 属性
通过 props.history.push("路径") 的方式进行路由跳转
import React from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
return (
<div>
<div>
{/* 编程式导航导航 */}
<button
onClick={() => {
props.history.push("/child1");
}}
>
onclick: go to child1
</button>
<button
onClick={() => {
props.history.push("/child2");
}}
>
onclick: go to child2
</button>
</div>
<div>
{/* 定义路由出口 */}
<Switch>
{/* 根组件默认展示，要添加 exact 属性，防止二次渲染 */}
{/* <Route path="/" component={Child1} exact />*/}
{/* 路由重定向 */}
<Redirect from="/" to="/child1" exact />
<Route path="/child1" component={Child1} />
<Route path="/child2" component={Child2} />
</Switch>
</div>
</div>
);
}
export default withRouter(App);
- 在类组件中
在 Child1.js 中，类组件的 props 拥有 location、match、history 属性，通过 this.props.history.push("路径") 的方式进行路由跳转
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";
export default class Child1 extends Component {
render() {
return (
<>
<div>
<button
onClick={() => {
this.props.history.push("/child1/child1A");
}}
>
onclick: go to child1/child1A
</button>
<button
onClick={() => {
this.props.history.push("/child1/child1B");
}}
>
onclick: go to child1/child1B
</button>
</div>
<div>
<Switch>
<Route path="/child1/child1A" component={Child1A} />
<Route path="/child1/child1B" component={Child1B} />
</Switch>
</div>
</>
);
}
}
3. this.props.history.replace() 路由跳转，清除历史记录
此方式跳转会删除历史记录，使用和传参方式和 this.props.history.push() 相同
Link组件也可以使用 replace 方式，只需要在Link标签上添加 replace 属性即可
this.props.history.replace("/child1/child1B");
4. this.props.history.go(num) 路由跳转，前进、后退
// 历史记录 前进
this.props.history.go(1)
// 或
this.props.history.goForward();
// 历史记录 后退
this.props.history.go(-1)
// 或
this.props.history.goBack();
// 历史记录 后退两步
this.props.history.go(-2)
3. 嵌套路由
- 配置一级路由结构
import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
return (
<div>
<div>
{/* link 导航 */}
{/* 也使用 NavLink，相比link 它多了一个点击时的 active 类，可以设置点击时样式 */}
<Link to="/child1">Link: go to child1</Link> |{" "}
<Link to="/child2">Link: go to child2</Link>
</div>
<div>
{/* 定义路由出口 */}
<Switch>
{/* 根组件默认展示，要添加 exact 属性，防止二次渲染 */}
{/* <Route path="/" component={Child1} exact />*/}
{/* 路由重定向 */}
<Redirect from="/" to="/child1/child1A" exact />
<Route path="/child1" component={Child1} />
<Route path="/child2" component={Child2} />
</Switch>
</div>
</div>
);
}
export default App;
- 配置子路由结构
在 Child1.js 中，link，Route 标签中要写全路径
import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";
export default class Child1 extends Component {
render() {
return (
<>
<div>
<Link to="/child1/child1A">Link: go to child1A</Link> |{" "}
<Link to="/child1/child1B">Link: go to child1B</Link>
</div>
<div>
<Switch>
<Route path="/child1/child1A" component={Child1A} />
<Route path="/child1/child1B" component={Child1B} />
</Switch>
</div>
</>
);
}
}
