React Router 零基础使用教程

React Router 是一个用于构建单页应用的库，它可以帮助我们在 React 应用中实现路由功能。本教程将详细介绍 React Router 的基本用法，包括路由的配置、导航、参数传递等。

安装 React Router

首先，我们需要在项目中安装 React Router。可以使用 npm 或者 yarn 进行安装：

npm install react-router-dom

或者

yarn add react-router-dom

配置路由

在使用 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';
import NotFound from './components/NotFound';

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

export default App;

在上面的代码中，我们使用 BrowserRouter 作为路由容器，并使用 Route 组件来定义路由规则。exact 属性用于确保只有在路径完全匹配时才渲染对应的组件。Switch 组件用于确保只有第一个匹配的路由会被渲染。

创建组件

接下来，我们需要创建对应的组件来处理不同的路由。在上面的代码中，我们引入了 Home、About 和 NotFound 组件，分别对应了根路径、/about 路径和其他未匹配路径。

import React from 'react';

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

export default Home;

import React from 'react';

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

export default About;

import React from 'react';

function NotFound() {
  return <h1>404 Not Found</h1>;
}

export default NotFound;

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to=\"/\">Home</Link>
        </li>
        <li>
          <Link to=\"/about\">About</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

在上面的代码中，我们使用 Link 组件来创建导航链接。to 属性指定了链接的目标路径。

参数传递

有时候，我们需要在路由之间传递参数。React Router 提供了多种方式来实现参数传递，包括路径参数、查询参数和状态参数。

路径参数

路径参数是指在路由路径中包含的动态参数。例如，我们可以创建一个带有动态用户 ID 的用户详情页面：

<Route path=\"/users/:id\" component={UserDetail} />

在 UserDetail 组件中，我们可以通过 props.match.params 来获取路径参数的值：

import React from 'react';

function UserDetail(props) {
  const { id } = props.match.params;

  return <h1>User ID: {id}</h1>;
}

export default UserDetail;

查询参数

查询参数是指在 URL 中以 ? 开头的参数。例如，我们可以创建一个带有查询参数的搜索页面：

<Route path=\"/search\" component={Search} />

在 Search 组件中，我们可以通过 props.location.search 来获取查询参数的值：

import React from 'react';

function Search(props) {
  const searchParams = new URLSearchParams(props.location.search);
  const keyword = searchParams.get('keyword');

  return <h1>Search: {keyword}</h1>;
}

export default Search;

状态参数

状态参数是指通过路由传递的状态信息。例如，我们可以在路由中传递一个包含用户信息的对象：

<Route path=\"/profile\" render={() => <Profile user={user} />} />

在 Profile 组件中，我们可以直接访问传递的状态参数：

import React from 'react';

function Profile(props) {
  const { user } = props;

  return <h1>Username: {user.username}</h1>;
}

export default Profile;

示例说明

示例 1：基本路由

假设我们有一个简单的应用，包含首页和关于页面。我们可以按照上面的教程进行配置，然后在导航中添加链接到首页和关于页面的导航链接。

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

import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <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>
    </Router>
  );
}

export default App;

示例 2：参数传递

假设我们有一个用户列表页面，点击用户列表中的用户可以跳转到用户详情页面，并显示用户的 ID。

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

import UserList from './components/UserList';
import UserDetail from './components/UserDetail';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to=\"/users\">User List</Link>
          </li>
        </ul>
      </nav>
      <Route path=\"/users\" exact component={UserList} />
      <Route path=\"/users/:id\" component={UserDetail} />
    </Router>
  );
}

export default App;

在 UserList 组件中，我们可以使用 Link 组件来创建用户列表中的链接：

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

function UserList() {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <Link to={`/users/${user.id}`}>{user.name}</Link>
        </li>
      ))}
    </ul>
  );
}

export default UserList;

在 UserDetail 组件中，我们可以通过 props.match.params 来获取用户 ID：

import React from 'react';

function UserDetail(props) {
  const { id } = props.match.params;

  return <h1>User ID: {id}</h1>;
}

export default UserDetail;

希望这个教程能够帮助你入门 React Router，并能够顺利使用它来构建你的单页应用。如果你想了解更多高级用法，可以查阅 React Router 的官方文档。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：react router零基础使用教程 - Python技术站

react router零基础使用教程