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

Question

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

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

最好的方法是在列表的最后一个Route:中使用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路由器v6中，您可以执行以下操作：

<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，您可能需要以不同的方式进行操作，并使用"；重定向"；而不是"；导航"；

这可能令人费解。如果有更清洁的方法，请告诉我。但这就是我现在的收获。