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 };