在本小节中，我们将学习如何使用 React Router 实现页面导航和路由守卫。React Router 是 React 官方推荐的路由解决方案，能够帮助我们在单页面应用中实现页面之间的跳转。
1. 安装 React Router
首先，我们需要安装 react-router-dom 包。可以使用以下命令进行安装：
1
| npm install react-router-dom
|
2. 基本的页面导航
2.1 创建基础组件
我们先创建几个组件作为不同的页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import React from 'react';
const Home = () => {
return <h1>首页</h1>;
};
export default Home;
import React from 'react';
const About = () => {
return <h1>关于我们</h1>;
};
export default About;
import React from 'react';
const NotFound = () => {
return <h1>404 - 页面未找到</h1>;
};
export default NotFound;
|
2.2 设置路由
接下来，在 App.js 文件中，设置路由和导航。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
const App = () => {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/about">关于我们</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
export default App;
|
2.3 运行应用
确保你已经启动了开发服务器，运行你的 React 应用，你应该能够在浏览器中访问不同的页面了。
3. 添加路由守卫
路由守卫可以根据条件决定用户是否可以访问某个路由。在这里我们使用一个简单的例子，展示如何实现路由守卫。
3.1 创建一个登录状态
假设我们有一个简单的登录状态，我们需要在尝试访问 About 页面之前检查用户是否已登录。
1
2
3
4
5
6
7
8
9
10
11
12
|
export const isAuthenticated = () => {
return localStorage.getItem('isAuthenticated') === 'true';
};
export const login = () => {
localStorage.setItem('isAuthenticated', 'true');
};
export const logout = () => {
localStorage.removeItem('isAuthenticated');
};
|
3.2 创建路由守卫组件
我们创建一个 PrivateRoute 组件，用于保护某个路由。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isAuthenticated } from './auth';
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props =>
isAuthenticated() ? (
<Component {...props} />
) : (
<Redirect to="/" />
)
}
/>
);
};
export default PrivateRoute;
|
3.3 使用路由守卫
接下来，编辑 App.js 使用 PrivateRoute。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import PrivateRoute from './PrivateRoute';
const App = () => {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/about">关于我们</Link>
</li>
<li>
<button onClick={login}>登录</button>
<button onClick={logout}>注销</button>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<PrivateRoute path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
|
通过上述更改，只有在用户登录后才能访问 /about 页面，否则会重定向到首页。
结论
在这一小节中，我们学习了如何使用 React Router 实现页面导航和基本的路由守卫。通过简单的逻辑，我们可以控制用户的访问权限，从而保护应用中的敏感页面。
接下来的学习可以扩展到更复杂的路由机制，如嵌套路由、动态路由等，以增强应用的灵活性和功能性。
