29 React Router简介之创建路由与导航

在这一章中，我们将深入探讨如何在 React 应用中创建路由和导航。通过学习如何使用 react-router-dom 来设置不同的路由和实现页面间的导航，您将能够增强您的应用的用户体验。

创建路由基础

在开始创建路由之前，请确保您已经按照上章的说明完成了 react-router-dom 的安装与配置。接下来，我们将通过一个简单的例子来了解创建路由的基本流程。

假设我们正在构建一个简单的博客应用，需要展示主页（Home）、关于页面（About）和文章详情页面（Post）。首先，我们需要创建一些基本的组件：

// 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;

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

const Post = ({ match }) => {
  return <h1>文章详情：{match.params.id}</h1>;
};

export default Post;

设置路由

现在，我们来设置路由。首先在 App.js 中引入 BrowserRouter 和 Route 组件，并通过它们来定义我们的路由结构：

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/post/:id" component={Post} />
      </Switch>
    </Router>
  );
};

export default App;

在这个示例中：

• 我们使用 BrowserRouter 包裹整个应用，使得路由能够工作。
• Switch 组件会确保只渲染一个匹配的 Route 组件。
• 我们定义了三个路由：
  • path="/"：对应首页的 Home 组件。
  • path="/about"：对应关于页面的 About 组件。
  • path="/post/:id"：动态路由，id 是文章的唯一标识，使用 Post 组件渲染文章详情。

访问路由

现在，当您运行应用时，访问 / 会展示首页，/about 会展示关于页面，而访问 /post/1（假设有一个ID为1的文章）会展示文章详情。

创建导航

为了让用户能够在不同的页面之间轻松导航，我们可以使用 Link 组件来创建链接。接下来，让我们添加一个简单的导航条。

// Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <Link to="/">首页</Link>
      <Link to="/about">关于我们</Link>
      <Link to="/post/1">查看文章 1</Link>
      <Link to="/post/2">查看文章 2</Link>
    </nav>
  );
};

export default Navbar;

接下来，在 App.js 中引入并使用 Navbar 组件：

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

const App = () => {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/post/:id" component={Post} />
      </Switch>
    </Router>
  );
};

export default App;

路由和导航总结

在这一节中，您学习了如何使用 react-router-dom 创建基本路由、设置动态路由以及为应用添加导航链接。通过合理的使用 Route 和 Link 组件，您可以轻松实现页面间的跳转和导航。

接下来的章节，我们将进一步探讨如何使用 Link 和 NavLink 来增强导航的功能和效果，敬请期待！