第五十二课:React Router的使用
学习目标
在本节课结束后,你应该能够:
- 理解React Router的基本概念和作用。
- 掌握如何设置路由(Route)和链接(Link)。
- 了解如何处理路由参数和构建嵌套路由。
- 学会如何使用编程式导航控制路由跳转。
学习内容
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组件对应的路径。
课后练习
- 创建一个新的React应用并安装React Router。
- 设置三个基本的路由:Home、About和Contact。
- 在About页面中添加一个子路由,显示个人信息详情。
- 在Contact页面中,使用编程式导航在提交表单后跳转到Home页面。
练习解析
-
安装React Router:
npm install react-router-dom
-
设置基本路由:
// 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> ); }
-
在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>; }
-
使用编程式导航在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),处理路由参数,创建嵌套路由,以及执行编程式导航。