今天我们要聊一聊 React Router，这是一个让你的 React 应用导航变得轻松愉快的神奇工具。无论是构建简单的网站还是复杂的单页面应用，React Router 都能助你一臂之力。废话不多说，让我们开始探险吧！
第一步：安装React Router
首先，我们需要使用 npm 或者 yarn 安装 React Router。在终端运行以下命令：
npm install react-router-dom //或者 yarn add react-router-dom
第二步：基本用法
// App.js import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( <Router> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Router> ); } export default App;
React Router 主要提供了两个核心组件：BrowserRouter 和 Route。让我们来看看它们是如何配合工作的：
// App.js import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( <Router> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Router> ); } export default App;
在这个例子中，我们使用 BrowserRouter 作为我们的路由容器，然后定义了两个路由：一个是根路径 '/' 对应 Home 组件，另一个是 '/about' 对应 About 组件。是不是很简单？
第三步：路由参数
React Router 也支持路由参数，让我们的路由变得更加灵活。比如：
// App.js import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import UserProfile from './UserProfile'; function App() { return ( <Router> <Route path="/" exact component={Home} /> <Route path="/user/:username" component={UserProfile} /> </Router> ); } export default App;
在 UserProfile 组件中，我们可以通过 props.match.params.username 获取到路由参数。这就是 React Router 让我们处理动态路由的方式。
第四步：使用Link实现导航
为了实现页面导航，React Router 提供了 Link 组件。这样我们就可以避免直接使用 <a> 标签了，让页面变得更 React 风格。
// Home.js import React from 'react'; import { Link } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <Link to="/about">Go to About</Link> </div> ); } export default Home;
第五步：嵌套路由
如果你的应用有复杂的页面结构，React Router 也能轻松胜任。看看嵌套路由的例子：
// App.js import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import UserProfile from './UserProfile'; function App() { return ( <Router> <Route path="/" exact component={Home} /> <Route path="/user/:username" component={UserProfile} /> </Router> ); } export default App;
React Router 的嵌套路由让页面组织变得更加清晰。
第六步：withRouter
有时候我们需要将路由信息传递给非路由组件，这时候就需要使用 withRouter 高阶组件了。
// UserProfile.js import React from 'react'; import { withRouter } from 'react-router-dom'; function UserProfile(props) { const username = props.match.params.username; return ( <div> <h1>User Profile</h1> <p>Username: {username}</p> </div> ); } export default withRouter(UserProfile);
