React---day12

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：

 <NavLink
          to="/about"
          end
          className={({ isActive }) => (isActive ? "about-link" : "")}
        >
          企业历史
        </NavLink>
        <NavLink
          to="/about/culture"
          className={({ isActive }) => (isActive ? "about-link" : "")}
        >
          企业文化
        </NavLink>
        <NavLink
          to="/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 推荐的路由配置方式

1. 直接用 和 组件（你现在的写法就是 v6 推荐方式）
2. 或者用 useRoutes 实现配置式路由