React - 如果路径不存在则重定向到默认路径

Question

我正在创建一个简单的反应应用程序。我只是想知道如果输入的路径不存在，如何重定向到某个路径。

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import HomePage from './screens/HomePage/home';

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage/>} />
      </Routes>
    </BrowserRouter>
  );
}

export { App };

假设我转到“localhost:3000/login”，但由于该路径不存在，我希望它自动重定向到“localhost:3000”作为默认值。

Answer 1

您可以将

*

添加到您的路径中，因此如果现有路径不匹配，则它会命中此路由，您可以重定向到您想要的任何地方。

这是代码片段：

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
import HomePage from './screens/HomePage/home';

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage/>} />
        <Route path="/some-existing" element={<SomeComponent />} />
        <Route path="*" element={<HomePage />} /> // page-not-found route
      </Routes>
    </BrowserRouter>
  );
}

export { App };

Answer 2

最好的方法是在列表的最后一个路由中使用

Redirect

组件：

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes, Navigate, Redirect } from 'react-router-dom';
import HomePage from './screens/HomePage/home';

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <HomePage />
        </Route>
        <Route path="*">
          <Redirect to="/" />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export { App };

Answer 3

在react-router v6中，你可以这样做：

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<HomePage/>} />
    <Route path="*" element={<Navigate to='/' replace />} />
  </Routes>
</BrowserRouter>

Answer 4

我通过这样做成功做到了：

我创建了一个 MissingRoute.js

import React from 'react';
import { Navigate } from 'react-router-dom';

function MissingRoute() {
 return < Navigate to={{pathname: '/'}} / >
}

export { MissingRoute }

然后将其用作路线中的元素：

<Routes>
 <Route path="*" element={<MissingRoute/>} />
</Routes>

对于旧版本的 React，您可能需要采取不同的方式并使用“重定向”而不是“导航”

这可能会很复杂。让我知道是否有更干净的方法来做到这一点。但这是我现在得到的。