React Router v5 使用指南
如何使用 React Router v5？
首先安装依赖包：
npm install react-router-dom@5 --save
接下来展示一个简单的用法示例：
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
function App() {
return (
<div>
<h1>React Router 基本用法</h1>
<Router>
<NavLink to="/comments" activeClassName="active">评论</NavLink>
<NavLink to="/search" activeClassName="active">搜索</NavLink>
<Route path="/comments" component={Comments} />
<Route path="/search" component={Search} />
<Redirect from="/" exact to="/comments" />
</Router>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
以下是关键点总结：
-
顶层必须使用 BrowserRouter 或 HashRouter 包裹（注意整个项目只能有一个这样的根标签）。
-
交互组件：<NavLink />
- <NavLink /> 是 <Link /> 的增强版，支持高亮显示当前选中状态。
- 使用
to属性指定跳转路径。 - 可通过
activeClassName设置选中时的样式。 - 注意：
end属性控制是否严格匹配路径。
- 路由视图：<Route />
- 默认匹配规则为模糊匹配，只要路径以指定值开头即匹配成功。
- 如果希望精确匹配，请添加
exact属性。 - 使用 <Switch> 标签包裹多个 <Route>，确保只渲染第一个匹配项。
- 重定向：<Redirect />
- 示例：
<Redirect from="/" exact to="/comments" /> - 通常将 <Redirect> 放在所有路由定义的最后，用于处理未匹配的情况。
// 路由组件接收的三个默认属性
props.history:
- go(n): 跳转 n 个页面
- push(path, state): 编程式导航
- replace(path, state): 替换当前历史记录
props.location:
- pathname: 当前路径
- search: 查询字符串
- state: 路由传递的状态
props.match:
- params: 动态参数对象
- path: 当前匹配的路径模式
- url: 当前匹配的完整路径
参数传递方式
React Router 提供了三种主要的参数传递方式：
- 动态参数 (params)
- 链接示例：
<Link to='/user/profile/john'>用户详情</Link> - 路由注册：
<Route path="/user/profile/:username" component={UserProfile} /> - 接收参数：
this.props.match.params.username
- 查询参数 (search)
- 链接示例：
<Link to='/user/search?name=john&age=28'>搜索</Link> - 接收参数：
this.props.location.search（需使用库如query-string解析）
- 状态参数 (state)
- 链接示例：
<Link to={{pathname:'/user/details', state:{name:'john', age:28}}}>详情</Link> - 接收参数：
this.props.location.state
BrowserRouter 与 HashRouter 的区别
| 特性 | BrowserRouter | HashRouter |
|---|---|---|
| 底层实现 | H5 History API | URL 哈希值 |
| 路径形式 | /path/to/resource |
/#/path/to/resource |
| 刷新后状态保留 | 状态保留 | 状态丢失 |
| 兼容性 | 不兼容 IE9 及以下 | 兼容所有浏览器 |
- BrowserRouter 监听
popstate事件。 - HashRouter 监听
hashchange事件。
以上就是 React Router v5 的核心内容。
