React Router 4 学习笔记（一）Route 配置-JavaScript中文网-JavaScript教程资源分享门户

React Router 是一个由 React 社区开发的路由库，用于管理 React 应用中的页面路由。它提供了一种灵活的方式来组织应用程序，并且适用于单页面应用程序和多页面应用程序。

本篇文章主要介绍 React Router 4 中的 Route 配置，包括 Route 的基本用法、嵌套路由、动态路由和路由转发等内容。

Route 基本用法

在 React Router 中，Route 是用于匹配特定 URL 路径的组件。它可以通过 path 属性指定匹配的路径，通过 component 属性指定要渲染的组件。下面是一个简单的例子：

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

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

export default App;

在上面的代码中，我们使用 BrowserRouter 组件作为路由容器，并在 div 中定义了两个 Route 组件。第一个 Route 组件的 exact 属性表示只有在 URL 路径为 / 时才会匹配，而第二个 Route 组件的 path 属性为 /about，表示只有在 URL 路径为 /about 时才会匹配。

当 URL 路径匹配到相应的 Route 组件时，该组件的 component 属性指定的组件将被渲染。例如，在上面的代码中，当 URL 路径为 / 时，会渲染 Home 组件，当 URL 路径为 /about 时，会渲染 About 组件。

嵌套路由

React Router 4 中支持嵌套路由，即在一个 Route 组件中嵌套另一个 Route 组件。这种方式可以用于构建复杂的应用程序，例如，一个由多个页面组成的应用程序。

下面是一个嵌套路由的例子：

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

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

export default App;

在上面的代码中，我们定义了三个 Route 组件，分别对应 /、/about 和 /contact 三个路径。在 div 中，我们还定义了一个 ul，用于导航到不同的页面。

需要注意的是，当使用嵌套路由时，父级 Route 组件的 path 属性应该以 / 开头，子级 Route 组件的 path 属性则不需要。

动态路由

在实际开发中，我们可能需要使用动态路由来处理一些动态的 URL。例如，我们可能需要根据用户的 ID 来显示不同的用户信息页面。

React Router 4 中支持动态路由，我们可以使用冒号 : 来定义动态参数。下面是一个动态路由的例子：

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import User from './components/User';

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

export default App;

在上面的代码中，我们使用 :id 来定义一个动态参数，表示用户的 ID。当 URL 路径为 /user/1 时，该路径将匹配到 Route 组件，并渲染 User 组件。此时，User 组件的 match 属性中会包含一个 params 对象，其中包含了动态参数的值。

// www.javascriptcn.com code example
function User(props) {
  const { match } = props;
  const { id } = match.params;

  return (
    <div>
      <h1>User {id}</h1>
    </div>
  );
}

在上面的代码中，我们通过 match.params 获取了动态参数的值，并将其显示在页面上。

路由转发

有时我们需要在某个路径下匹配多个组件，这时可以使用路由转发来实现。例如，我们可能需要在 /user 路径下同时匹配 UserList 和 UserDetail 两个组件。

下面是一个路由转发的例子：

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import UserList from './components/UserList';
import UserDetail from './components/UserDetail';

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

export default App;

在上面的代码中，我们使用 Switch 组件来包裹两个 Route 组件，表示只匹配其中一个。当 URL 路径为 /user 时，将渲染 UserList 组件；当 URL 路径为 /user/:id 时，将渲染 UserDetail 组件。

需要注意的是，当使用路由转发时，父级 Route 组件的 path 属性应该以 / 结尾，否则可能会匹配到错误的路径。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d56adca941bf7134a1a5b8

React Router 4 学习笔记（一）Route 配置

Route 基本用法

嵌套路由

动态路由

路由转发

接着读