React-Router怎么设置重定向？ - 打野赵怀真 - 沸点 - 掘金

1年前

React-Router怎么设置重定向？
"在React Router中，设置重定向可以通过`Redirect`组件或使用`Navigate`组件（在React Router v6及以上版本中）来实现。以下是如何设置重定向的示例。

### React Router v5

在React Router v5中，可以使用`Redirect`组件：

```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const Home = () => <h2>Home Page</h2>;
const Login = () => <h2>Login Page</h2>;
const Dashboard = () => <h2>Dashboard Page</h2>;

const App = () => {
const isAuthenticated = false; // 假设用户未认证

return (
<Router>
<Switch>
<Route path=\"/\" exact component={Home} />
<Route path=\"/login\" component={Login} />
{/* 使用Redirect进行重定向 */}
<Route path=\"/dashboard\">
{isAuthenticated ? <Dashboard /> : <Redirect to=\"/login\" />}
</Route>
</Switch>
</Router>
);
};

export default App;
```

### React Router v6

在React Router v6及以上版本中，使用`Navigate`组件：

```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes,

展开

今天学到了

赞过