1. 路由环境配置
react-router-dom 版本要在 v6 以上
- 安装依赖
npm install react-router-dom -S
- 在入口 index.js 引入,并使用路由模式组件包裹根组件
根据需求选择 HashRouter 还是 BrowserRouter,默认是 BrowserRouter
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
,
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, Routes } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
console.log(props);
return (
{/* link 导航 */}
{/* 也使用 NavLink,相比link 它多了一个点击时的 active 类,可以设置点击时样式 */}
Link: go to child1 |{" "}
Link: go to child2
{/* 定义路由出口 */}
{/* 根组件默认展示 */}
{/* } /> */}
{/* 路由重定向 */}
} />
} />
} />
);
}
export default App;
2. navigate() 路由跳转
在 App.js 中,通过 react-router-dom 中的 useNavigate() 方法,进行编程式导航跳转
注意:withRouter 在 react-router-dom v6 版本中已被弃用
import React from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
const navigate = useNavigate();
return (
{/* 编程式导航导航 */}
{/* 定义路由出口 */}
{/* 根组件默认展示 */}
{/* } /> */}
{/* 路由重定向 */}
} />
} />
} />
);
}
export default App;
3. navigate(path,{replace: true}) 路由跳转,清除历史记录
此方式跳转会删除历史记录,使用和传参方式和 navigate() 相同,只是增加 {replace: true}参数
Link组件也可以使用 replace 方式,只需要在Link标签上添加 replace 属性即可
navigate('/child1/child1B',{replace: true})
4. navigate(num) 路由跳转,前进、后退
// 历史记录 前进
navigate(1)
// 历史记录 后退
navigate(-1)
// 历史记录 后退两步
navigate(-2)
3. 嵌套路由
方式一:分离式
- 配置一级路由结构
在一级路由 App.js 中,拥有子路由的路由需要在 path 最后加上 /*
import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
console.log(props);
return (
Link: go to child1 |{" "}
Link: go to child2
{/* 定义路由出口 */}
{/* 根组件默认展示 */}
{/* } /> */}
{/* 路由重定向 */}
} />
} />
} />
);
}
export default App;
- 配置子路由结构
在 Child1.js 中,link 标签中要写全路径,路由出口的 path 中只写路由名称
import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";
export default class Child1 extends Component {
render() {
return (
Link: go to Child1A |{" "}
Link: go to Child1B
{/* 定义路由出口 */}
{/* 路由重定向 */}
{/* } /> */}
{/* 根组件默认展示 */}
} />
} />
} />
);
}
}
方式二:集合式
- 配置嵌套路由结构
在 App.js 中,以 Route 组件嵌套的方式配置嵌套路由结构
import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
import Child1A from "./components/Child1A";
import Child1B from "./components/Child1B";
function App() {
return (
Link: go to child1 |{" "}
Link: go to child2
{/* 定义路由出口 */}
} />
}>
} />
} />
} />
);
}
export default App;
- 定义子子路由出口
在 Child1.js 中,引入 Outlet 并定义出口位置
import React, { Component } from "react";
import { Link, Outlet } from "react-router-dom";
export default class Child1 extends Component {
render() {
return (
Link: go to Child1A |{" "}
Link: go to Child1B
{" "}
);
}
}