基本使用
1. 首先安装依赖
npm i react-router-dom
2. 引入实现路由所需的组件,以及页面组件
注意: BrowserRouter 组件最好放在最顶层所有组件之外,确保内部组件使用link做路由跳转时不出错
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./view/login";
import Layout from "./view/layout";
function App() {
return (
<BrowserRouter>
<Routes>
{/* path指定页面显示的路由路径 */}
{/* element指定渲染的组件 */}
<Route path="/login" element={<Login />}></Route>
<Route path="/" element={<Layout />}></Route>
</Routes>
</BrowserRouter>
);
}
export default App;
路由跳转
注意:路径以 / 开头的则是绝对路径,否则为相对路径,既相对于当前RUL的路径进行改变
link组件
import { Link } from "react-router-dom";
function Login() {
return (
<div>
我的登录页面
<button>
{/* Link组件只能在Router内部使用,
因此使用到Link组件的组件一定要放在顶层的Router之内 */}
{/* to 指定要跳转的路由路径 */}
<Link to="/home">立即登录</Link>
</button>
</div>
);
}
export default Login;
NavLink组件
import { NavLink } from "react-router-dom";
function Login() {
return (
<div>
我的登录页面
<button>
{/* NavLink组件和Link组件的功能是一致的,区别在于可以判断其to属性是否是当前匹配到的路由 */}
{/* NavLink组件的style或className可以接收一个函数,函数接收一个isActive参数,可根据该参数调整样式 */}
<NavLink
style={(isActive) => ({ color: isActive ? "red" : "#fff" })}
to="/home"
>
立即登录
</NavLink>
</button>
</div>
);
}
export default Login;
编程式跳转
import { useNavigate } from "react-router-dom";
function Login() {
/* 使用useNavigate钩子函数生成navigate对象,可以通过JS代码完成路由跳转 */
/* useNavigate取代了原先版本中的useHistory */
const navigate = useNavigate();
return (
<div>
我的登录页面
<button onClick={() => navigate("/home")}>立即登录</button>
</div>
);
}
export default Login;
动态路由参数
路径参数
在Route组件中的path属性中定义路径参数
在组件内通过useParams hook访问路径参数
<BrowserRouter>
<Routes>
<Route path='/foo/:id' element={Foo} />
</Routes>
</BrowserRouter>
import { useParams } from 'react-router-dom';
export default function Foo(){
const params = useParams();
return (
<div>
<h1>{params.id}</h1>
</div>
)
}
search参数
- 查询参数不需要在路由中定义
- 使用
useSearchParams
hook来访问查询参数。其用法和useState类似,会返回当前对象和更改它的方法- 更改searchParams时,必须传入所有的查询参数,否则会覆盖已有参数
import { useSearchParams } from 'react-router-dom';
// 当前路径为 /foo?id=12
function Foo(){
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('id')) // 12
setSearchParams({
name: 'foo'
}) // /foo?name=foo
return (
<div>foo</div>
)
}
嵌套路由
通过嵌套的方式 书写Route组件 实现对嵌套路由的定义
<Routes>
<Route path="/" element={<Home/>} ></Route>
<Route path="/father" element={<Father/>} >
<Route path='child' element={<Child/>}></Route>
</Route>
</Routes>
在父组件中使用 Outlet 来显示匹配到的子组件
import {Outlet} from 'react-router-dom';
function Father(){
return (
<div>
// ... 自己组件的内容
// 留给子组件Child的出口
<Outlet />
</div>
)
}
默认路由
定义:在嵌套路由中,如果URL仅匹配了父级URL,则 Outlet 中会显示带有 index 属性的路由
<Routes>
<Route path='/foo' element={Foo}>
<Route index element={Default}></Route>
<Route path='bar' element={Bar}></Route>
</Route>
</Routes>
全匹配路由
定义: path属性取值为 * 时,可以匹配任何(非空)路径,同时该匹配拥有最低的优先级。可以用于设置404页面
<Routes>
<Route path='/foo' element={Foo}>
<Route path='bar' element={Bar}></Route>
<Route path='*' element={NotFound}></Route>
</Route>
</Routes>
多组路由
通常,一个应用中只有一个
Routes
组件。但根据实际需要也可以定义多个路由出口(如侧边栏和主页面都要随URL而变化)
<Router>
<SideBar>
<Routes>
<Route></Route>
</Routes>
</SideBar>
<Main>
<Routes>
<Route></Route>
</Routes>
</Main>
</Router>
重定向
当在某个路径
/a
下,要重定向到路径/b
时,可以通过Navigate
组件进行重定向到其他路径
import { Navigate } from 'react-router-dom';
function A(){
return (
<Navigate to="/b" />
)
}