React路由知识点汇总
专为编程小白设计的大白话React路由教程，包含核心概念、基础用法和高级特性
📚 路由是什么？
想象一下你的网站是一栋大楼，路由就是这栋楼里的导航系统。它告诉浏览器：”当用户访问’/about’这个地址时，请显示关于我们的页面”。
在React中，路由帮助我们根据URL的变化显示不同的组件内容，让单页面应用（SPA）拥有类似多页面的导航体验。
🔧 安装与基本设置
使用React路由前，需要安装react-router-dom包：
npm install react-router-dom
然后在你的应用中引入核心组件：
// 引入路由组件
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;
import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;
🔗 路由配置
路由配置就像定义一张路径-组件对应表：
<Router>
<Route path=”/” component={Home} />
<Route path=”/about” component={About} />
<Route path=”/contact” component={Contact} />
</Router>
<Route path=”/” component={Home} />
<Route path=”/about” component={About} />
<Route path=”/contact” component={Contact} />
</Router>
当用户访问/about时，就会显示About组件！
🧭 导航组件
不要用普通的<a>标签，使用React Router提供的Link组件：
<Link to=”/”>首页</Link>
<Link to=”/about”>关于我们</Link>
<Link to=”/contact”>联系我们</Link>
<Link to=”/about”>关于我们</Link>
<Link to=”/contact”>联系我们</Link>
Link组件不会导致页面刷新，只更新URL和显示对应组件，提供流畅的SPA体验。
🆔 动态路由
当需要处理类似/user/123这样的路径时，使用冒号语法定义动态参数：
<Route path=”/user/:id” component={User} />
在User组件中，你可以通过props.match.params.id获取这个id值：
function User(props) {
const userId = props.match.params.id;
return <div>显示用户ID: {userId}</div>;
}
const userId = props.match.params.id;
return <div>显示用户ID: {userId}</div>;
}
🔄 路由重定向
Redirect组件可以自动跳转到另一个路径：
import { Redirect } from ‘react-router-dom’;
// 当访问旧地址时自动跳转到新地址
<Route path=”/old-path”>
<Redirect to=”/new-path” />
</Route>
// 当访问旧地址时自动跳转到新地址
<Route path=”/old-path”>
<Redirect to=”/new-path” />
</Route>
也可以用在组件内部，根据条件重定向：
if (!isLoggedIn) {
return <Redirect to=”/login” />
}
return <Redirect to=”/login” />
}
⚙️ 嵌套路由
就像文件夹里可以包含子文件夹一样，路由也支持嵌套：
<Route path=”/products”>
<Products>
<Route path=”/products/:id” component={ProductDetail} />
</Products>
</Route>
<Products>
<Route path=”/products/:id” component={ProductDetail} />
</Products>
</Route>
在Products组件内使用props.children或Outlet(v6)来显示子路由内容。
🎯 精确匹配
默认情况下，/about 会匹配 / 和 /about。
使用exact属性确保精确匹配：
// 只有当路径完全匹配”/”时才显示Home组件
<Route exact path=”/” component={Home} />
<Route exact path=”/” component={Home} />
在v6版本中，路由默认是精确匹配的。
📊 React路由流程图
用户如何通过路由访问不同内容：
用户点击导航
URL发生变化
路由匹配路径
渲染对应组件
更新页面内容
整个过程不需要页面刷新，提供流畅的用户体验！