最近使用了一下react-router@6
版本感觉有很大的改动,记录一下。
React Router v6 makes heavy use of React hooks, so you'll need to be on React 16.8 or greater before attempting the upgrade to React Router v6. The good news is that React Router v5 is compatible with React >= 15, so if you're on v5 (or v4) you should be able to upgrade React without touching any of your router code.
官网给出的原文上面说的很清楚了,在 6 版本上使用了React Hooks
写法,说明不支持class
类来写。并且要求react
版本在16.8
以上。如果想兼容class
组件 以及 react@15
使用只能用react-router@5版本
。
安装
D:\your_project> npm i react-router-dom@6
# or
D:\your_project> yarn add react-router-dom@6
# or
D:\your_project> cnpm i react-router-dom@6
变化
Switch
与 Routes
在 v5 版本中必须明确的说明嵌套的的路由和链接,那么就要获取父路由的属性等等。在 v6 版本则不需要,因为路径是相对的
。案例如下:
// react-router-dom v5.1
import {
BrowserRouter,
Switch,
Route,
Link,
useRouteMatch,
} from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" children={<Home />} />
<Route path="/users" children={<Users />} />
</Switch>
</BrowserRouter>
);
}
function Users() {
// 获取当前 router 匹配信息 { path:string , url: string , }
const match = useRouteMatch();
return (
<div>
<div className="link">
<Link to={`${match.url}/me`}>My Profile</Link>
</div>
<Switch>
{/* path = /users/me */}
<Route path={`${match.path}/me`}>
<OwnUserProfile />
</Route>
{/* path = /users/:id */}
<Route path={`${match.path}/:id`}>
<UserProfile />
</Route>
</Switch>
</div>
);
}
在 v6 版本后 再父组件里写的路径若无 /
开头 都是相对父组件。案例如下:
// react-router-dom v6+
import {
BrowserRouter,
Routes,
Route,
Link,
} from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
{/* /users 下的所有路径 渲染 User组件 /user /user/* */}
<Route path="/users/*" element={<Users />} />
</Routes>
</BrowserRouter>
);
}
function Users() {
return (
<div>
<nav>
{ /* to = /users/me */ }
<Link to="me">My Profile</Link>
</nav>
{/* 子组件 path 直接相对父组件 */}
<Routes>
{/* /user/me */}
<Route path="me" element={<OwnUserProfile />} />
{/* /user/:id */}
<Route path=":id" element={<UserProfile />} />
</Routes>
</div>
);
Route
- Route Props.path
是相对的,它们会自动在父路由的路径和 URL 上构建。
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="users" element={<Users />}>
{/* /user/me */}
<Route path="me" element={<OwnUserProfile />} />
{/* /user/:id */}
<Route path=":id" element={<UserProfile />} />
</Route>
</Routes>
</BrowserRouter>
- Route (Props.
component
| Props.render
| Props.children
)废弃
-> 使用 Props.element
在 v5 版本 路由可以使用 三种属性来挂载组件,但是在 v6 版本 只有一种 就是 element
属性。
// react-router-dom v5.x
function Page() {
return <div> page 组件 </div>;
}
// 使用 component 挂载组件
<Route path="/page" component={Page} />;
// 使用 render 挂载组件
<Route
path="/page"
render={(routerProps) => <Page routerProps={routerProps} />}
/>;
// 使用 children 挂载组件
<Route path="/page" children={<Page />} />;
<Route path="/page">
<Page />
</Route>;
Redirect (移除)
在 v5 版本中 <Switch>
里 使用 <Redirect>
组件进行路由重定向。
// v5.x
// any code ...
<Switch>
<Route path="/user" children={<User />} />
</Switch>;
function User({ userInfo }) {
if (!userInfo) {
// 重定向 到 登录页
return <Redirect to="/login" />;
}
return <div>User Page</div>;
}
在 v6 版本中 将使用 Navigation
// v6.x
// any code ...
<Switch>
<Route path="/user" children={<User />} />
</Switch>;
function User({ userInfo }) {
if (!userInfo) {
// 重定向 到 登录页
return <Navigation to="/login" />;
}
return <div>User Page</div>;
}
Switch (移除)
在 v5 版本中 用 <Switch>
组件包裹 <Route>
路由组件, 现在改用 <Routes>
// v5.x
<Switch>
<Route path="/" children={<Home />} />
<Route path="/user" children={<User />} />
</Switch>
// v6.x
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user" element={<User />} />
</Routes>
Link
Link 组件主要用于路由跳转,在 v5 版本 Link
的 to
属性是根据当前 url
。举例:
// 当前 路由路径 /user
<Link to="me" /> // render <a href="/me" >...</a>
// 当前 路由路径 /user/
<Link to="me" /> // render <a href="/user/me" >...</a>
而在 v6 版本中 如果Link
在 Route
里渲染 to
属性是根据当前<Route>
路由的匹配的 url
;如果不在Route
组件里挂载的,则是根据 BrowserRouter.basename
渲染 跳转路径,默认/
。
// v6.x
import { BrowserRouter, Link, Outlet, Route, Routes } from "react-router-dom";
<BrowserRouter>
<Link to=""> go Home</Link> | <Link to="user"> go user</Link>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user" element={<User />}>
<Route path=":id" element={<Person />} />
</Route>
</Routes>
</BrowserRouter>;
function Home() {
return (
<div>
<h1>Home page</h1>
</div>
);
}
function User() {
return (
<div>
<h1>User page</h1>
<Link to="..">go Home</Link>
<Link to="abc">go User abc</Link>
<hr />
<Outlet />
</div>
);
}
function Person() {
return (
<div>
<h1>User abc page</h1>
<Link to="..">go user</Link>
<Link to="../..">go Home</Link>
</div>
);
}
如果你把 url 看作文件路径,你发现 Link
的 to
相当于 cd
跳转。
<Route path="app">
<Route path="dashboard">
<Route path="stats" />
</Route>
</Route>
<Link to="stats"/> // => <a href="/app/dashboard/stats">
<Link to="../stats"/> // => <a href="/app/stats">
<Link to="../../stats"/> // => <a href="/stats">
<Link to="../../../stats"/> // => <a href="/stats">
假设当前的文件路径为 /app/dashboard
cd stats # pwd is /app/dashboard/stats
cd ../stats # pwd is /app/stats
cd ../../stats # pwd is /stats
cd ../../../stats # pwd is /stats
NavLink
Props.exact
命名为 Props.end
,删除Props.activeClassName
,Props.activeStyle
使用函数返回style,className
。
// v5.x
const style = { color : "red" }
<NavLink to="/user" exact />
<NavLink to="/user" activeClassName="active-link" />
<NavLink to="/user" activeStyle={style} />
// v6.x
const getCls = ({ isActive }) => isActive ? "link" : "ative link";
const getStyle = ({ isActive }) => ({ color: isActive ?'red': 'blue' })
<NavLink to="/user" end /> // 精确匹配
<NavLink to="/user" className={getCls} />
<NavLink to="/user" activeStyle={getStyle} />
useRouteMatch (替换) useMatch
新增
Navigate 跳转路由组件
<Navigate>
组件和 useNavigate
hooks api 拥有一样的用法。在函数组件使用 useNavigate
api,而在 class 组件,可以使用 Navigate
组件进行挂载跳转路由。
interface NavigateProps {
to: To;
replace?: boolean;
state?: any;
}
class User extends React.Component {
render() {
const { userInfo } = this.props;
if (!userInfo) {
return <Navigate to="/login" replace />;
}
return <div>User</div>;
}
}
Outlet 路由视图组件
当 Route
下有子 Route
的时候 需要使用 Outlet
显示子路由内容。
useLocation hooks
获取当前路由位置
对象。如果您想在当前位置更改时执行一些副作用,这可能很有用。
import { useEffect } from "react"
import { useLocation } from 'react-router-dom';
function App() {
let location = useLocation();
useEffect(() => {
// do something
}, [location]);
return (
// ...
);
}
useNavigate hooks
调用返回一个函数,该函数调用第一个参数为string
类型 与 <Link>
to
属性 效果一样,为number
类型,在历史记录堆栈中传递要访问的增量。第二个参数 与 <Link>
的 state,replace
类型相同。 替代了 v5 版本中的 history
对象
import { useNavigate } from "react-router-dom";
function App(){
const navigate = useNavigate();
const submit = (data)=>{
api(data).then(res=>{
navigate("/user")
})
}
const back = ()=>{
navigate(-1) // 后退一页
}
return (
// ...
)
}
useParams hooks
获取路由:
匹配的信息,返回当前 URL 中与 匹配的动态参数的键/值对的对象。
import { useParams } from "react-router-dom";
function Person(){
const { id } = useParams() // path = /user/:id => current url = /user/1
console.log(id) // 1
return (
// ....
)
}
useRoutes hooks
使用数组来定义路由。返回路由组件。
import { useRoutes } from "react-router-dom";
const routes = [
{
path: "/",
element: <Home />,
children: [
{
path: "/test",
element: <Test />,
},
],
},
{
path: "*",
element: <NotFound />,
},
];
function App() {
const router = useRoutes(routes);
return router;
}
useSearchParams hooks
用于读取和设置 url 的query
部分,返回和 react useState hooks 一样。每次searchParams
修改相当于路由 push 一次。
import { useSearchParams } from "react-router-dom";
// current url => /
function App() {
const [searchParams, setSearchParams] = useSearchParams();
const setQueryId = () => {
// url change => /?id=2&name=test
setSearchParams({
id: 2,
name: "test",
});
};
return (
<div>
<h1> current query id :{searchParams.get("id")}</h1>
<button onClick={setQueryId}>set id</button>
</div>
);
}
-
searchParams
-
searchParams.get(str) 返回 string | null
获取 url 的 query 第一个匹配上的的
str
值.例如/user?id=1
=> searchParams.getAll('id') 返回值为为'1'
-
searchParams.getAll(str) 返回 string[]
获取 url 的 query 所有的
str
值.例如/user?id=1&id=2
=> searchParams.getAll('id') 返回值为['1','2']
-
-
setSearchParams
修改当前 url query 部分。相当于路由跳转了。你可以使用第二个参数,进行是否推入
history
栈。例如:setSearchParams({ id : 2 },{ replace : true })
相当于history.replace({currentUrl}/?id=2)