reactjs 如何创建自定义路由以处理react中路由的重定向[duplicate]

nfs0ujit 于 2022-11-22 发布在 React

关注(0)|答案(2)|浏览(196)

此问题在此处已有答案：

What is the alternative for Redirect in react-router-dom v 6.0.0?（5个答案）
3天前关闭。
我正在使用react-router，其中有以下代码

<Router basename={config.historyBasename}>
          <Routes>
            <Route path={routes.landingPage} element={<LandingPage />} />
            <Route
              path={routes.activateAccount}
              element={
                !document.referrer.length ? (
                  redirectTo(appUrls.home)
                ) : (
                  <Parent/>
                )
              }
            />
           
          </Routes>
        </Router>

这里，我使用的是我创建的自定义方法redirectTo。现在，我尝试创建一个自定义路由，它将

<Route
              path={routes.activateAccount}
              element={
                !document.referrer.length ? (
                  redirectTo(appUrls.home)
                ) : (
                  <Parent/>
                )
              }
            />

如何创建一个自定义路由来处理这个问题？

reactjs

来源：https://stackoverflow.com/questions/74488766/how-to-create-a-custom-route-to-handle-the-redirection-of-routes-in-react

2条答案

按热度按时间

fkvaft9z1#

您可以使用Redirect from react-router-dom来有条件地重定向到默认路径

<Route
    path={routes.activateAccount}
    element={!document.referrer.length ? <Redirect to='/home' /> : <Redirect to='/second-route' />}
/>

对于v6，您可以使用“导航”

<Route
    path={routes.activateAccount}
    element={
        !document.referrer.length ? (
        <Navigate replace to='/home' />
        ) : (
           <Navigate replace to='/second-route' />
        )
        }
    />

但是请注意，这在服务器渲染时不起作用，因为导航发生在React.useEffect（）中。
请查看Redirects in React Router v6以了解更详细的信息。

赞(0）回复(0）举报 2022-11-22

ryevplcw2#

在过去的几年里，react-router-dom和react-router引入了<Redirect />组件，该组件在呈现时将用户重定向到指定位置。
例如：

<Route exact path="/">
    <Redirect to={"/home"} />
</Route>

每当用户到达/时将其重定向到/home。
使用react-router-dom@^6.0.0时，请避免使用Redirect，而改用Navigate：

<Route 
    path="/"
    element={<Navigate to={"/home"} replace />}
/>

它本质上与我上面编写的代码的目的相同。

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 如何创建自定义路由以处理react中路由的重定向[duplicate]

2条答案

相关问题

热门标签

最新问答