react-router的其他重要组件

react-router的其他重要组件

Navigate组件

Navigate组件用于路由的重定向，当这个组件出现时，就会自动跳转到对应的to属性的路径中。

用于显示默认显示的页面：

// App.jsx
import React from "react"
import { Routes, Route, Navigate } from "react-router-dom"
import Home from "./Home.jsx"
import Shop from "./Shop.jsx"
export default function App() {
  return (
    <>
      
      <Routes>
        <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
        <Route path="/home" element={<Home></Home>}></Route>
        <Route path="/shop" element={<Shop></Shop>}></Route>
      </Routes>
    </>
  )
}

当页面网址的path是/就会匹配到<Route path="/" element={<Navigate to="/home"></Navigate>}></Route>这个路由组件，它就会显示<Navigate to="/home"></Navigate>这个组件的内容，Navigat组件会自动跳转到对应的to属性的路径中，也就显示了<Route path="/home" element={<Home></Home>}></Route>这个组件，最后页面渲染的就是Home组件。

根据条件重定向：

// App.jsx
import React, { useState } from "react"
import { Routes, Route, Navigate } from "react-router-dom"
import Home from "./Home.jsx"
import Shop from "./Shop.jsx"
export default function App() {
  let [isLogin, setIsLogin] = useState(false);
  const loginHandle = () => {
    setIsLogin(true);
  }
  return (
    <>
      {isLogin ? <Navigate to='/home' /> : <button onClick={loginHandle}>登录</button>}
      <Routes>
        <Route path="/home" element={<Home></Home>}></Route>
        <Route path="/shop" element={<Shop></Shop>}></Route>
      </Routes>
    </>
  )
}

Outlet组件

Outlet组件是用于渲染嵌套路由（子路由）内容的。当父路由匹配时，Outlet组件会根据子路由的配置，渲染相应的组件。通常用于布局组件中，以便在父路由组件中嵌套显示子路由组件。

主要作用：

• 嵌套路由：允许在父路由组件中定义一个占位符，用于渲染子路由匹配的组件。
• 布局组件：常用于创建共享布局的页面，例如导航栏、侧边栏等。

基本用法

有一个主布局组件 MainLayout，并且有多个子路由组件 Home 和 Shop

布局组件 MainLayout

// MainLayout.jsx
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

const MainLayout = () => {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/shop">Shop</Link></li>
        </ul>
      </nav>
      <main>
        {/* 用于渲染首页或者商品页 */}
        <Outlet />
      </main>
    </div>
  );
};

export default MainLayout;

MainLayout 组件包含一个导航栏和一个主内容区域。<Outlet /> 组件用于渲染匹配的子路由组件。

子路由组件 Home

// Home.jsx
import React from 'react';

const Home = () => {
  return (
    <div>
      <h2>首页</h2>
      <p>这是首页的数据</p>
    </div>
  );
};

export default Home;

子路由组件 Shop

// Shop.jsx
import React from 'react';

const Shop = () => {
  return (
    <div>
      <h2>商品页</h2>
      <p>这是商品页的数据</p>
    </div>
  );
};

export default Shop;

路由配置 App

// App.jsx
import React from "react"
import { Routes, Route } from "react-router-dom"
import Home from "./Home.jsx"
import Shop from "./Shop.jsx"
import MainLayout from './MainLayout.jsx'
export default function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route path="home" element={<Home />} />
          <Route path="shop" element={<Shop />} />
        </Route>
      </Routes>
    </>
  )
}

路由配置 App

// App.jsx
import React from "react"
import { Routes, Route } from "react-router-dom"
import Home from "./Home.jsx"
import Shop from "./Shop.jsx"
import MainLayout from './MainLayout.jsx'
export default function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<Home />} />
          <Route path="shop" element={<Shop />} />
        </Route>
      </Routes>
    </>
  )
}

index属性用于定义默认路由，也就是当父路由路径完全匹配时渲染的组件。但是，index 属性不能与 path 属性一起使用。index 属性本身就表示这是一个默认路由。

布局组件 MainLayout

// MainLayout.jsx
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

const MainLayout = () => {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/shop">Shop</Link></li>
        </ul>
      </nav>
      <main>
        {/* 用于渲染首页或者商品页 */}
        <Outlet />
      </main>
    </div>
  );
};

export default MainLayout;