React-Router项目实战：从零开始的React路由管理-原创手记-慕课网

概述

本文详细介绍了React-Router项目的实战应用，包括基本概念、优势、安装配置、路由嵌套、参数传递、编程式导航、路由守卫以及导航转场效果。通过多个示例代码，读者可以深入理解React-Router项目实战中的各个关键点。React-Router项目实战涵盖了从基础到高级的各种功能，帮助开发者构建复杂的单页面应用。

React-Router简介

什么是React-Router

React-Router 是React官方维护的路由管理库，用于在React应用中实现单页面应用的路由功能。它支持定义路由路径、页面组件、动态参数以及嵌套路由等常用功能。通过 React-Router，开发者可以轻松地管理和导航单页面应用中的不同视图。

React-Router的优势和应用场景

React-Router具有以下优势：

简洁的API：提供简单易用的API，用于定义路由和导航。
强大的功能：支持嵌套路由、动态路由、导航转场效果等功能。
良好的性能：通过React的虚拟DOM机制，React-Router在导航时仅更新变化的部分，提高了应用的性能。
易于测试：React-Router的路由组件可以被轻松地测试，有助于提升代码质量。

应用场景包括但不限于：

单页面应用：适用于需要复杂路由功能的单页面应用。
多页面应用：使用React-Router可以将多页面应用中的页面组件化，便于管理和维护。
动态路由：根据用户输入或数据变化动态地加载不同的视图。
嵌套路由：支持嵌套的层级结构，便于构建复杂的页面结构。
无刷新导航：实现页面的无刷新导航，提升用户体验。

安装与配置React-Router

安装React-Router

安装React-Router可以通过npm或yarn。以下是使用npm安装的命令：

npm install react-router-dom

创建项目并配置React-Router

创建一个新的React项目，然后在项目中配置React-Router。

步骤1: 创建项目

npx create-react-app my-app
cd my-app

步骤2: 配置React-Router

在项目中安装并配置React-Router。首先，确保App.js中已经引入了React-Router。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

export default App;

在上述代码中，使用 <Router> 组件包裹整个应用，使用 <Switch> 组件来包裹多个 <Route> 组件，确保只匹配一个路径。当路径匹配时，相应的组件会被渲染。

基本路由配置

使用<Route>组件定义路由

使用 <Route> 组件定义一个路由，指定了路径和对应的组件。在上面的示例中，当用户访问根路径 / 时，Home 组件会被渲染；当访问 /about 路径时，About 组件会被渲染。

示例代码

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

export default App;

使用<Link>组件进行页面跳转

<Link> 组件用于在页面中创建链接，当用户点击链接时，会触发路由的切换，而不会导致页面的重新加载。

示例代码

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

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

function About() {
  return <h2>About</h2>;
}

export default App;

路由嵌套与参数传递

实现路由的嵌套结构

通过 <Route> 组件的嵌套可以创建路由的层级结构，使得应用的路径更加灵活和复杂。

示例代码

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users/1">User 1</Link>
            </li>
            <li>
              <Link to="/users/2">User 2</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/users/:id" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

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

function About() {
  return <h2>About</h2>;
}

function User({ match }) {
  return (
    <div>
      <h3>User Detail</h3>
      <p>User ID: {match.params.id}</p>
    </div>
  );
}

export default App;

在上述代码中，/users/:id 路由是一个动态路径，其中 :id 是一个动态参数，用户可以访问 /users/1、 /users/2 等，User 组件会根据 :id 参数渲染不同的内容。

传递参数给路由

传递参数给路由时，可以在组件中通过 match.params 访问这些参数。如上例中的 User 组件通过 match.params.id 获取路径中的 id 参数。

示例代码

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users/1">User 1</Link>
            </li>
            <li>
              <Link to="/users/2">User 2</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/users/:id" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

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

function About() {
  return <h2>About</h2>;
}

function User({ match }) {
  return (
    <div>
      <h3>User Detail</h3>
      <p>User ID: {match.params.id}</p>
    </div>
  );
}

export default App;

编程式导航

使用history对象进行编程式导航

可以通过React-Router提供的 history 对象进行编程式的导航，例如，在点击按钮时触发导航。

示例代码

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

function Home() {
  const history = useHistory();
  return (
    <div>
      <h2>Home</h2>
      <button onClick={() => history.push('/about')}>Go to About</button>
    </div>
  );
}

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

export default App;

在上述代码中，Home 组件中通过 useHistory 钩子获取 history 对象，点击按钮时触发 history.push('/about') 导航到 /about 路径。

使用withRouter高阶组件获取路由信息

withRouter 是一个高阶组件，用于在组件中获取当前路由的信息，例如 location 和 match 对象。

示例代码

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

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

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

const EnhancedComponent = withRouter(Home);
function Home(props) {
  console.log(props);
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={EnhancedComponent} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在上述代码中，Home 组件通过 withRouter 高阶组件包装，可以访问 props.location 和 props.match 等属性。

路由守卫与导航转场效果

实现路由守卫

路由守卫用于控制用户访问某些特定路径的权限，例如在用户未登录的情况下阻止用户访问私密页面。

示例代码

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

function PrivateRoute({ component: Component, ...rest }) {
  function isLoggedIn() {
    // 检查是否登录
    return false;
  }

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/private">Private</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <PrivateRoute path="/private" component={Private} />
        </Switch>
      </div>
    </Router>
  );
}

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

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Private() {
  return (
    <div>
      <h2>Private Page</h2>
    </div>
  );
}

export default App;

在上述代码中，PrivateRoute 组件是一个自定义的路由组件，用于实现路由守卫。如果用户未登录，则重定向到 /login 路由。

添加导航转场动画

通过自定义CSS转场动画，可以为导航提供更加平滑和美观的效果。

示例代码

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import './App.css';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

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

function Home() {
  return (
    <div className="container fade-enter">
      <h2>Home</h2>
      <p>This is the Home page.</p>
    </div>
  );
}

function About() {
  return (
    <div className="container fade-enter">
      <h2>About</h2>
      <p>This is the About page.</p>
    </div>
  );
}

export default App;

在CSS文件中，可以为 .container 类添加过渡效果，如下所示：

.container {
  transition: transform 0.5s ease;
}

.container.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}

.container.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
}

.container.fade-exit {
  opacity: 1;
  transform: translateX(0);
}

.container.fade-exit-active {
  opacity: 0;
  transform: translateX(-50px);
}

在上述代码中，通过CSS的 transition 属性定义了过渡效果，通过 fade-enter 和 fade-exit 类定义了进入和退出时的样式。