19 从零到上手学习 React 框架 - 页面导航与路由守卫

在本小节中，我们将学习如何使用 React Router 实现页面导航和路由守卫。React Router 是 React 官方推荐的路由解决方案，能够帮助我们在单页面应用中实现页面之间的跳转。

1. 安装 React Router

首先，我们需要安装 react-router-dom 包。可以使用以下命令进行安装：

npm install react-router-dom

2. 基本的页面导航

2.1 创建基础组件

我们先创建几个组件作为不同的页面。

// Home.js
import React from 'react';

const Home = () => {
    return <h1>首页</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>关于我们</h1>;
};

export default About;

// NotFound.js
import React from 'react';

const NotFound = () => {
    return <h1>404 - 页面未找到</h1>;
};

export default NotFound;

2.2 设置路由

接下来，在 App.js 文件中，设置路由和导航。

// App.js
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 页面之前检查用户是否已登录。

// auth.js
export const isAuthenticated = () => {
    return localStorage.getItem('isAuthenticated') === 'true';
};

export const login = () => {
    localStorage.setItem('isAuthenticated', 'true');
};

export const logout = () => {
    localStorage.removeItem('isAuthenticated');
};

3.2 创建路由守卫组件

我们创建一个 PrivateRoute 组件，用于保护某个路由。

// PrivateRoute.js
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。

// App.js
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 实现页面导航和基本的路由守卫。通过简单的逻辑，我们可以控制用户的访问权限，从而保护应用中的敏感页面。

接下来的学习可以扩展到更复杂的路由机制，如嵌套路由、动态路由等，以增强应用的灵活性和功能性。