react router 6 路由数据 重定向
时间: 2024-05-13 13:14:17 浏览: 14
在 React Router 6 中,重定向可以通过 `<Navigate>` 组件来实现。
假设你想要将 `/old-path` 重定向到 `/new-path`,你可以这样写:
```jsx
import { Navigate } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/old-path" element={<Navigate to="/new-path" />} />
<Route path="/new-path" element={<NewComponent />} />
</Routes>
);
}
```
当用户访问 `/old-path` 时,页面会自动跳转到 `/new-path`。
你也可以将重定向动态生成。例如,你可以根据用户是否已登录来决定将其重定向到哪个页面:
```jsx
import { Navigate, useNavigate } from "react-router-dom";
function App() {
const isLoggedIn = true;
const navigate = useNavigate();
function handleLogout() {
// 登出后重定向到首页
navigate("/", { replace: true });
}
return (
<Routes>
<Route path="/dashboard" element={isLoggedIn ? <Dashboard /> : <Navigate to="/login" />} />
<Route path="/login" element={<LoginPage onLogin={() => navigate("/dashboard")} />} />
</Routes>
);
}
```
在上面的示例中,如果用户已登录,则会显示 `Dashboard` 组件,否则会将用户重定向到 `/login` 页面。在登录成功后,我们可以通过 `useNavigate` hook 将用户重定向回 `Dashboard` 页面或任何其他页面。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)