如何在Reaction路由器V6中重定向？

编程基础网前端问题

2022-01-01

How to redirect in React Router v6?(如何在Reaction路由器V6中重定向？)

本文介绍了如何在Reaction路由器V6中重定向？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试升级以响应路由器V6(react-router-dom 6.0.1)。

以下是我的更新代码：

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route render={() => <Navigate to="/" />} />
  </Routes>
</BrowserRouter>

最后一个Route正在将其余路径重定向到/。

但是，我收到一个错误

TS2322：不能将类型‘{Render：()=>；Element；}’赋值给类型‘IntrinsicAttributes&；(PathRouteProps|LayoutRouteProps|IndexRouteProps)’。*类型‘IntrinsicAttributes&；(PathRouteProps|LayoutRouteProps|IndexRouteProps)’上不存在属性‘Render’。

但是，基于the doc，它确实有renderforRoute。如何正确使用？

推荐答案

我认为您应该使用不匹配的路由方法。

请在文档中查看此信息。

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" />}
    />
  </Routes>
</BrowserRouter>

这篇关于如何在Reaction路由器V6中重定向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react