react router

react路由  首先安装路由  npm i react-router-dom

引入路由

import {BrowserRouter,Route} from 'react-router-dom'

使用路由

import React, { Component } from 'react';
import Header from './common/header/index'
import store from './store/index'
import { Provider } from 'react-redux'
import {BrowserRouter,Route} from 'react-router-dom'
import HOME from './pages/home'
import Detail from './pages/detail'
import Home from './pages/home';
class App extends Component {
render() {
return (
<div className="miao">
<Provider store={store}>
<div>
<Header></Header>
<BrowserRouter>
<div>
<Route path="/" exact component={Home}></Route>
<Route path="/detail" component={Detail}></Route>
</div>
</BrowserRouter>
</div>
</Provider>
</div>
);
}
}

export default App;


这里注意<Provider>外面要包裹一个div,然后<BrowserRouter>里面也要包裹一个div。

当我们输入/,访问hom。输入/detai,访问detai。加上eaxct就是访问完全相等的路径的页面,如果不加输入/detail也会访问到

home页面和detail页面一起

<think>好的,我现在要介绍一下 React Router。首先,我需要明确用户的需求,他们可能想了解React Router的基本概念、用途以及如何在项目中使用。接下来,我应该组织内容的结构,确保信息有条理,容易理解。 首先,React Router是一个用于React应用的路由库,所以需要解释路由在单页面应用(SPA)中的作用。用户可能不太清楚SPA和传统多页面应用的区别,这里需要简单说明。然后,提到React Router的核心功能,比如管理URL和组件的映射关系,实现无刷新页面切换。 接下来,需要介绍React Router的版本。目前常用的是v6版本,所以应该重点讲解v6的API和变化。比如,从之前的Switch组件过渡到Routes组件,以及Route组件的新用法。同时,要提到常用组件如BrowserRouter、Link、Navigate等,并解释它们的作用。 然后,安装方法是一个基本点,需要给出npm或yarn的安装命令,方便用户直接使用。同时,给出一个简单的代码示例,展示如何配置路由,这样用户能更直观地理解。例如,创建一个包含主页和关于页面的路由配置。 还需要注意动态路由和嵌套路由的介绍,这些是实际开发中常用的功能。动态路由可以通过参数传递,比如/users/:id,而嵌套路由则允许在父组件内渲染子组件,适用于复杂的布局结构。 另外,编程式导航也是一个重要部分,比如使用useNavigate钩子进行页面跳转,相比之前的useHistory,v6版本有所变化,需要指出这点差异,避免用户混淆。 最后,总结React Router的优势,比如保持UI与URL同步,提升用户体验,以及它在React生态系统中的地位。可能还要提到官方文档和社区资源,供用户进一步学习。 在写作过程中,要确保使用正确的中文表达,避免技术术语使用不当。同时,按照系统要求,所有行内数学表达式用$...$格式,但在这个问题中可能用不到数学公式,所以主要关注代码块和术语的正确格式。检查是否有拼写错误或语法问题,保持回答的准确性和流畅性。 可能还需要考虑用户的实际应用场景,比如他们是否在构建一个需要多个页面的React应用,或者是否需要处理认证后的重定向等问题。因此,适当提及保护路由、重定向等高级用法会更有帮助,但作为介绍,保持基础内容的完整性更重要。 总之,结构应该是:定义React Router,核心功能,安装方法,基本用法示例,主要组件介绍,动态和嵌套路由,编程式导航,总结优势,最后推荐学习资源。确保每个部分简洁明了,逐步引导用户理解React Router的使用和重要性。</think>React Router 是用于 React 应用程序的**路由管理库**,它通过管理 URL 与组件的映射关系,帮助构建单页面应用(SPA)的多页面导航体验。以下是关键要点: --- ### 一、核心功能 1. **URL 与组件映射** 将 URL 路径(如 `/about`)与 React 组件绑定,实现无刷新页面切换。 2. **动态路由** 支持参数化路径(如 `/users/:id`),通过 `useParams()` 获取参数: ```jsx const { id } = useParams(); // 获取 /users/123 中的 id=123 ``` 3. **嵌套路由** 在父组件内定义子路由,实现复杂布局: ```jsx <Route path="/dashboard" element={<Dashboard />}> <Route path="stats" element={<Stats />} /> // 匹配 /dashboard/stats </Route> ``` --- ### 二、核心组件 1. **`<BrowserRouter>`** 包裹整个应用,提供 HTML5 History API 支持: ```jsx import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); ``` 2. **`<Routes> 与 <Route>`** - v6 版本用 `<Routes>` 替代旧版 `<Switch>` - `<Route>` 定义路径与组件的映射: ```jsx <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> ``` 3. **`<Link>`** 替代 `<a>` 标签实现无刷新导航: ```jsx <Link to="/about">关于我们</Link> ``` 4. **`<Navigate>`** 重定向到指定路径: ```jsx <Route path="/old" element={<Navigate to="/new" />} /> ``` --- ### 三、编程式导航 通过 `useNavigate` 钩子实现 JS 控制跳转: ```jsx import { useNavigate } from 'react-router-dom'; function Login() { const navigate = useNavigate(); return ( <button onClick={() => navigate('/dashboard')}>登录后跳转</button> ); } ``` --- ### 四、安装与版本 1. **安装** 适用于 React v16.8+: ```bash npm install react-router-dom@6 ``` 2. **版本差异** - v6 简化了 API(如用 `element` 替代 `component`) - 嵌套路由配置更直观 --- ### 五、典型应用场景 1. 根据 URL 显示不同页面组件 2. 实现带参数的详情页(如 `/product/:id`) 3. 权限控制(未登录重定向到登录页) 4. 404 页面处理: ```jsx <Route path="*" element={<NotFound />} /> ``` --- ### 六、优势 - 保持 UI 与 URL 同步 - 支持浏览器前进/后退操作 - 轻量级(gzip 后仅约 6KB) 官方文档:[reactrouter.com](https://reactrouter.com/) 建议通过实际项目练习路由配置、动态参数传递和权限验证场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值