网站建设天津优化防控举措
15、react-route
主要是提供了一些组件：
15.1 Route：
Route用于路径的匹配；
- path属性：用于设置匹配到的路径；
- omponent属性：设置匹配到路径后，渲染的组件；
- exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件
15.2 Link以及NavLink
-
通常路径的跳转是使用Link组件，最终会被渲染成a元素；
-
NavLink是在Link基础之上增加了一些样式属性；
添加自定义样式activeClassName已经被放弃了，现在是动态添加class
className={({ isActive }) => (isActive ? "link-active" : "")}exact：是否精准匹配，在 React Router v6 及以上版本已经不再使用
-
to属性：Link中最重要的属性，用于设置跳转到的路径；
15.3 Routes
react-router中只要是路径被匹配到的Route对应的组件都会被渲染；
- 匹配当前 URL，只渲染第一个匹配的
<Route>。 - 替代了 v5 里的
<Switch>，并且只能包裹<Route>或<React.Fragment>。 - 让路由跳转和嵌套路由更简单、性能更好。
15.4 Navigate
<Navigate /> 是 React Router v6 及以上版本中用于重定向的组件。
- 当组件渲染
<Navigate to="/login" />时，页面会自动跳转到/login路由。
举个例子：user页面如果登录了就显示用户名字，如果没有就要跳转到登录界面
export default class User extends PureComponent {constructor(props) {super(props);this.state = {username: 'Guest',isLogin: true};}render() {// 重定向的应用：如果是登录状态，则显示用户名，否则重定向到登录页return this.state.isLogin ? (<div><h2>User Page</h2><p>Username: {this.state.username}</p><p>Status: {this.state.isLogin ? 'Logged In' : 'Logged Out'}</p></div>) : <Navigate to="/login" />;}
}
15.5 路由的嵌套
举个例子：关于下面的子路由
主要步骤：
1、父组件配置子路由：
<Route path="/about/*" element={<About />} />
/*:配置子路由
2、NavLink：
<NavLinkto="/about"endclassName={({ isActive }) => (isActive ? "about-link" : "")}>企业历史</NavLink><NavLinkto="/about/culture"className={({ isActive }) => (isActive ? "about-link" : "")}>企业文化</NavLink><NavLinkto="/about/contact"className={({ isActive }) => (isActive ? "about-link" : "")}>联系我们</NavLink>
- 这里使用的是绝对路径，使用相对路径会出现路径的叠加
- 默认路由要添加end，因为我们使用的是绝对路径，不添加end就是模糊匹配了，这样的话默认路由一直有样式。
end属性的作用是：只有当前路径完全等于 to 的值时才激活该链接。
3、配置Routes
<Routes>{/* 默认子路由填写index */}{/* 使用相对路径 */}<Route index element={<History />} /><Route path="culture" element={<Culture />} /><Route path="contact" element={<Contact />} /></Routes>
这里要使用相对路径了
默认路由添加index，index用于设置父路由下的默认子页面。
15.6 参数传递
动态路由的方式:
NavLink:拼接字符串，注意是路径参数/about/bcd/name=${name}
<NavLink to={`/about/bcd/name=${name}`} state={{ from: "about" }} replace>bcd</NavLink>
Route: :name
<Route path="bcd/:name" element={<Bcd />} />
获取参数：
import { useParams } from "react-router-dom";export default function Bcd() {console.log("Bcd组件渲染");const { name } = useParams(); // 正确获取路由参数console.log(name);return <h2>Detail页面，name: {name}</h2>;
}
个人觉得函数组件获取要方便一点，获取参数更简单、代码更现代。
15.7 v6 推荐的路由配置方式
- 直接用 和 组件（你现在的写法就是 v6 推荐方式）
- 或者用 useRoutes 实现配置式路由