当前位置：首页 > news >正文

React---day12

news 2025/6/13 19:27:59

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>;
}

个人觉得函数组件获取要方便一点，获取参数更简单、代码更现代。