如何在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>

相关文章