react-router之默认路由与多组路由

默认路由

• <Route>标签上有一个属性为index,他就是用来控制默认展示的子路由的

import {
    Routes,
    Route,
    useNavigate,
    NavLink,
    Navigate,
    Outlet,
  } from "react-router-dom";
  
  
  export default function App() {
    return (
      <div className="App">
        <h1>Welcome to React Router!</h1>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />}>
            {/* 定义嵌套路由 */}
            <Route path="child" element={<AboutChild1/>}></Route>
            <Route index element={<AboutChild2/>}></Route>
          </Route>
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    );
  }
  
  function AboutChild1() {
    return (
      <>
        <h2>Hello AboutChild1</h2>
      </>
    );
  }
  
  function AboutChild2() {
    return (
      <>
        <h2>Hello AboutChild2</h2>
      </>
    );
  }
  
  function Home() {
    return (
      <>
        <main>
          <h2>Welcome to the homepage!</h2>
          <p>You can do this, I believe in you.</p>
        </main>
        <nav>
          <NavLink to="/about"> About</NavLink>
        </nav>
      </>
    );
  }
  
  function About() {
    const navigate = useNavigate();
    const handelClickToHome = () => {
      navigate("/");
    };
  
    const handelClickToChild = () => {
      navigate("/about/child");
    };
    return (
      <>
        <main>
          <h2>Who are we?</h2>
          <p>That feels like an existential question, don't you think?</p>
        </main>
        <button onClick={handelClickToChild}>嵌套路由</button>
        {/* 定义子路由的显示位置 */}
        <Outlet/>
          <button onClick={handelClickToHome}>Home</button>
      </>
    );
  }
  

我们会发现到跳转到路由的时候，会显示我们定义index的路由

多组路由

一般的话我们使用一个路由就足够了，但是需求是多方面的，我们也可以定义多组路由

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>