从0开始学前端 第五十二课:React Router的使用

第五十二课:React Router的使用

学习目标

在本节课结束后,你应该能够:

  1. 理解React Router的基本概念和作用。
  2. 掌握如何设置路由(Route)和链接(Link)。
  3. 了解如何处理路由参数和构建嵌套路由。
  4. 学会如何使用编程式导航控制路由跳转。
学习内容
1. 路由的基础
  • 概念: React Router是一个基于React的库,它允许你在应用中设置动态路由。它使得组件能够根据URL的变化而相应地呈现不同的视图。

  • 代码示例:

    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
    
    function App() {
      return (
        <Router>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
            </ul>
          </nav>
    
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Router>
      );
    }
    
    function Home() {
      return <h2>Home Page</h2>;
    }
    
    function About() {
      return <h2>About Page</h2>;
    }
    
    • 预计输出: 首页将显示Home组件,点击"About"链接将切换到显示About组件。
2. 路由参数与嵌套路由
  • 概念: 路由参数是React Router中的动态片段,用于捕获URL中的值。嵌套路由允许你在一个路由内部渲染多个路由,构建复杂的用户界面。

  • 代码示例:

    import { Route, Link, useParams, useRouteMatch } from 'react-router-dom';
    
    function Topic() {
      let { topicId } = useParams();
      return <h3>Requested topic ID: {topicId}</h3>;
    }
    
    function Topics() {
      let { path, url } = useRouteMatch();
    
      return (
        <div>
          <h2>Topics</h2>
          <ul>
            <li><Link to={`${url}/components`}>Components</Link></li>
            <li><Link to={`${url}/props-v-state`}>Props v. State</Link></li>
          </ul>
    
          <Route path={`${path}/:topicId`} component={Topic} />
        </div>
      );
    }
    
    • 预计输出: 点击不同的主题链接将显示与路由参数相对应的文本。
3. 编程式导航
  • 概念: 编程式导航是指使用代码来控制用户的路由跳转,而非链接(Link)。

  • 代码示例:

    import { useHistory } from 'react-router-dom';
    
    function HomeButton() {
      let history = useHistory();
    
      function handleClick() {
        history.push('/home');
      }
    
      return (
        <button type="button" onClick={handleClick}>
          Go home
        </button>
      );
    }
    
    • 预计输出: 点击按钮后,页面将跳转到Home组件对应的路径。
课后练习
  1. 创建一个新的React应用并安装React Router。
  2. 设置三个基本的路由:Home、About和Contact。
  3. 在About页面中添加一个子路由,显示个人信息详情。
  4. 在Contact页面中,使用编程式导航在提交表单后跳转到Home页面。
练习解析
  1. 安装React Router:

    npm install react-router-dom
    
  2. 设置基本路由:

    // App.js
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
    
    function App() {
      return (
        <Router>
          <nav>
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/contact">Contact</Link></li>
            </ul>
          </nav>
    
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Router>
      );
    }
    
  3. 在About页面中添加子路由:

    // About.js
    import { Route, Link, useRouteMatch } from 'react-router-dom';
    
    function About() {
      let { path, url } = useRouteMatch();
      return (
        <div>
          <h2>About Page</h2>
          <ul>
            <li><Link to={`${url}/personal-info`}>Personal Info</Link></li>
          </ul>
    
          <Route path={`${path}/personal-info`} component={PersonalInfo} />
        </div>
      );
    }
    
    function PersonalInfo() {
      return <div><h3>Personal Information</h3></div>;
    }
    
  4. 使用编程式导航在Contact页面:

    // Contact.js
    import { useHistory } from 'react-router-dom';
    
    function Contact() {
      let history = useHistory();
    
      function handleSubmit(event) {
        event.preventDefault();
        // 处理提交逻辑...
        history.push('/');
      }
    
      return (
        <form onSubmit={handleSubmit}>
          <label>
            Name:
            <input type="text" name="name" />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }
    

通过这些练习,你将能够实践如何在React中使用Router来构建单页面应用程序(SPA),处理路由参数,创建嵌套路由,以及执行编程式导航。


章节目录
第五十三课:状态管理

  • 20
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值