React 入门第四天：理解React中的路由与导航

Caleb-niu

于 2024-08-24 07:00:00 发布

阅读量418

点赞数 5

分类专栏： React‘s family 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48576413/article/details/141424777

版权

React‘s family 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在React学习的第四天，我将目光聚焦在React Router上。路由是任何单页应用（SPA）的核心部分，决定了用户如何在应用中导航，以及不同URL对应的内容如何渲染。通过学习React Router，我体会到了React处理路由的强大和灵活性。以下是我第四天的学习心得。

1. 什么是React Router？

React Router是一个用于在React应用中实现路由功能的库。它允许你根据URL的不同路径渲染不同的组件，从而创建多页面的效果。React Router的核心思想是通过声明式的方式定义路由，让你能够轻松地管理应用的导航。

2. React Router的安装与基本使用

首先，你需要安装React Router库。在你的项目目录中运行以下命令：

npm install react-router-dom

安装完成后，你可以在应用中引入Router组件，并定义不同路径对应的页面组件。

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

function Home() {
  return <h2>首页</h2>;
}

function About() {
  return <h2>关于我们</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在这个简单的例子中，BrowserRouter（常用别名Router）是React Router的核心组件，它包裹了整个应用。Switch用于确保每次仅匹配一个Route。我们定义了两个路径：/对应首页组件，/about对应“关于我们”页面组件。

3. 动态路由与URL参数

React Router支持动态路由，这意味着你可以定义具有动态部分的URL，并在组件中访问这些参数。

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

function User() {
  let { id } = useParams();
  return <h2>用户ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </Router>
  );
}

export default App;

在这个例子中，/user/:id是一个动态路由，其中:id部分是一个URL参数。通过useParams钩子，我们可以在User组件中访问这个参数值，并根据ID的不同渲染相应内容。

4. 使用Link组件进行导航

在React中，使用<a>标签进行导航会导致页面刷新，而React是一个SPA框架，页面不应该刷新。React Router提供了Link组件，用于实现无刷新导航。

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
      </ul>
    </nav>
  );
}

通过使用<Link>组件，点击链接时页面不会刷新，而是由React Router处理导航，保持应用的SPA特性。

5. 嵌套路由

在复杂的应用中，你可能会遇到需要在一个页面内渲染多个子页面的情况。React Router支持嵌套路由，允许你在一个路由下定义多个子路由。

function Dashboard() {
  return (
    <div>
      <h2>仪表板</h2>
      <Switch>
        <Route path="/dashboard/profile" component={Profile} />
        <Route path="/dashboard/settings" component={Settings} />
      </Switch>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

在这个例子中，Dashboard组件内嵌了两个子路由/dashboard/profile和/dashboard/settings。通过这种方式，你可以组织更为复杂的页面结构，并保持代码的整洁与可维护性。

6. 404页面与重定向

在实际开发中，你需要处理用户访问未定义路由的情况。React Router允许你定义一个“404页面”来捕获所有未匹配的路由，同时还支持重定向。

import { Redirect } from 'react-router-dom';

function NotFound() {
  return <h2>404 - 页面未找到</h2>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
        <Redirect from="/old-path" to="/new-path" />
      </Switch>
    </Router>
  );
}

在这个例子中，我们定义了一个NotFound组件，并将其放在Switch的最后，用于捕获所有未定义的路由。此外，Redirect组件允许你将用户从旧的路径重定向到新的路径。

7. 路由守卫与权限控制

在一些场景中，你可能需要对某些页面进行权限控制，确保只有经过身份验证的用户才能访问。虽然React Router没有内置的路由守卫，但你可以通过条件渲染或自定义组件实现类似的功能。

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = /* 你的认证逻辑 */;

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
}