React小册入门(七)路由

React 路由基础

路由在前端开发中起着非常重要的作用。React Router 是 React 中最流行和常用的第三方库之一，它允许你把你的应用分成多个页面，同时无需刷新页面而进行页面跳转和状态管理。

React Router 安装和配置
首先，我们需要使用 npm 来安装 React Router。

npm install --save react-router-dom

这里我们选择下载 react-router-dom 依赖，它是 React Router 的 Web 版本，并且提供了大量易于理解和使用的 API。

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

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/" component={
    
    Home} />
      <Route path="/about" component={
    
    About} />
      <Route path="/topics" component={
    
    Topics} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

上面代码中，我们首先从react-router-dom导入了必要组件来启用路由功能，然后我们利用 BrowserRouter 组件为我们的根组件包装，在其中设置多个 Route 组件构建页面路径，每个路径匹配不同的组件渲染。

动态路由

有时候你需要设置动态路由，例如当你需要携带一些参数并将其传递到页面时，通过 URL 传递参数通常是比较直接和清晰的方式。

<Router>
  <div>
    <ul>
      <li>
        <Link to="/blog/1">Blog 1</Link>
      </li>
      <li>
        <Link to="/blog/2">Blog 2</Link>
      </li>
      <li>
        <Link to="/blog/3">Blog 3</Link>
      </li>
    </ul>

    <Switch>
      <Route exact path="/" component={
    
    Home} />
      <Route path="/about" component={
    
    About} />
      <Route path="/blog/:id" component={
    
    Blog} />
    </Switch>
  </div>
</Router>

上面代码中，我们定义了一个动态路径 /blog/:id，用于匹配任意 Blog 页面，其中 :id 是可以被传递的参数。当该参数被改变时，注意该组件会重新渲染以反映这些变化。

function Blog(props) {
    
    
  return (
    <div>
      <h2>Blog</h2>
      <p>你现在正在看的博客 ID 是：{
    
    props.match.params.id}</p>
    </div>
  );
}

在Blog组件内部，我们直接获取到路由信息中传递的 :id 参数，并渲染到页面中。

最后

React Router 是 React 生态系统中最受欢迎的路由库。通过这篇文章，我们简单介绍了 React Router 的基础知识以及如何构建和实现简单页面跳转和动态路由。React Router 还具有更强大的功能，例如程序化路由、redirects 和路由守卫等等，如果你对这些感兴趣，可以深入研究细节。