FullStackOpen: React Router
每个不同的应用界面最好都有自己的 url 地址。在单页应用中,我们实际上总是在同一页上,即使有时处于不同的界面,路由地址仍然保持不变。 React 有 React Router 库,为管理 React 应用中的路由提供了一个解决方案。 教程:FullStackOpen2022 / Part 7 / React Router 本文以 routed-anecdotes 应用为例。对应练习 7.1-7.3。 注意: 本文中 React Router 版本为 5。版本 6 的 React Router 有一些突破性的改变,详见:React Router | Upgrading from v5。 1. 使用 React Router 安装 React Router: npm install react-router-dom 启用 React Router 提供的路由的应用: App.js: import React, { useState } from 'react' import { Switch, Route, Link, } from 'react-router-dom' //... const Menu = () => { return ( <div> <Link to="/">anecdotes</Link> <Link to="/create">create new</Link> <Link to="/about">about</Link> </div> ) } const App = () => { //....