- v6 中 Switch 名称变为 Routes
代码如下:
import { Routes } from "react-router-dom";
function App() {
return (
<div>
<Routes>
.....
</Routes>
</div>
);
}
- v6 的变化
不再支持子组件和 component , 改为 element
<Route path="/home" >
<Index />
</Route>
<Route path='/login' component={Login}></Route>
改为
<Route path="/home" element={ <Index /> }>
</Route>
<Route path='/login' element={ <Login /> }>
</Route>
注:
element 的值为组件标签,不要忘记写成标签形式
Route 标签必须包含在Routes标签里,会不然报错
- v6 中,exact 属性不再需要
v6 内部算法改变,不再需要加exact实现精确匹配路由,默认就是匹配完整路径。
如果需要旧的行为,路径后加/*
<Route path="/products/*" element={<Products />} />
<Route path="/products/:productId" element={<ProductDetail />} />
route属性 路由是否区分大小写
caseSensitive={true}
- v6 中,Route 先后顺序不再重要,React Router 能够自动找出最优匹配路径
5.v6 保留Link,NavLink, 但是NavLink的activeClassName属性被移除
删除了 activeClassName 样式,如果想自己给它设置想要的highligh样式.
可以通过style属性修改actived的状态, 通过箭头函数接收到isActive参数值;
style接收一个css样式数据返回值进行修改 active状态样式。
import { NavLink } from "react-router-dom";
export default function Invoices() {
return (
<div style={{ display: "flex" }}>
<NavLink
style={({ isActive }) => {
return {
display: "block",
margin: "1rem 0",
color: isActive ? "red" : ""
};
}}
to={`/invoices`}
>
</NavLink>
</div>
);
}
// or
<NavLink className={({ isActive }) => isActive ? "red" : "blue"} />
- v6 移除 Redirect组件,改为使用 Navigate:
#5
<Redirect to="/home" />
#6
<Route path="/" element ={<Navigate replace to="/welcome" />} />
是对旧的 Redirect 的完整取代。
replace 属性也可以省略,不过行为由 replace 改为 push
- v6 嵌套路由改为相对匹配
嵌套路由必须放在 中,且使用相对路径,不再像 v5 那样必须提供完整路径,因此路径变短。
<Route path='/about' element={<About />}>
<Route index element={<Address />} />
<Route path='address' element={<Address />}></Route>
<Route path='information' element={<Information />}></Route>
<Route path='joinus' element={<Join />}></Route>
</Route>
8.使用Outlet组件,此组件是一个占位符,告诉 React Router 嵌套的内容应该放到哪里。
import {Outlet} from “react-router-dom”;
const Welcome=() => {
return
<section>
<h1>Welcome</h1>
<Outlet />
</section>
}
export default Welcome;
- 使用index 指定默认路由, 或者path为空
当嵌套路由有多个子路由的时候,可以增加 index 属性来指定默认路由。
function App()
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<About />} />
<Route path="user" element={<User />} />
<Route path="about" element={<About />} />
</Route>
</Routes>
);
}
或者
设置path为空,来指定默认路由,代码如下:
let router =[{
path: "/home",
element :<Home/ >,
children: [
{
path:"",
element:<News/>
},
{
path: " news " ,
element:<News/>
}
]
}]
- v6 用useNavigate实现编程式导航,useHistory被移除
import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
navigate("/welcome"); // push
navigate('/b', { state: { name: 'zhou' } })
如果要重定向:
navigate("/welcome",{replace:true});
除此之外,还可以使用navigate(-1)后退到前一页,使用navigate(-2)后退到前一页的前一页,navigate(1)前向导航,依此类推。
使用 useLocation 接收 useNavigate传递过来的值
// 接收跳转传过来的值
import { useLocation } from 'react-router-dom'
const location = useLocation()
const { state } = location
console.log(location, state);
- hooks 中获取参数的方法
useParams
返回当前动态路由参数
function Profile() {
const params = useParams()
console.log(params.userId)
return ()
}
useSearchParams
使用 useSearchParams hook 来访问查询参数(/xx/xx?userId=123)。其用法和 useState 类似,会返回当前对象和更改它的方法。
更改 searchParams 时,必须传入所有的查询参数,否则会覆盖已有参数。
function Profile() {
const params = useSearchParams()
console.log(params.userId)
return ()
}
- useRoutes 声明式的路由配置方式
声明式路由中,不能写index, 可以让path: “” , 来实现显示默认组件;
useRoutes函数,会返回已经渲染好的路由元素
let element = useRoutes([
{
path: "/",
element: <Dashboard />,
children: [
{
path: "",
element: <DashboardMessages />
},
{
path: "/messages",
element: <DashboardMessages />
},
{ path: "/tasks", element: <DashboardTasks /> }
},
{ path: "/team", element: <AboutPage /> }
]);