react-router之路由定义

简介

我们一般使用Route组件来定义路由，但是在定义的时候需要使用Routes组件类进行包裹点击，老版本应该是Switch组件

定义

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="*" element={<Navigate to="/"/>} />
      </Routes>
    </div>
  );
}

动态路由

• 当我们把path属性写成如下的时候/name/*，他会匹配所有的以name开头的路径，如/name/a、/name/b等
• 动态路由通过 :style 的形式实现，博客

嵌套路由

• 嵌套路由的path可以不用写父级的路径
• 且不需使用Outlet组件作为子组件的占位符

路由定义文件

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={<AboutChild/>}></Route>
        </Route>
        <Route path="*" element={<Navigate to="/" />} />
      </Routes>
    </div>
  );
}

路由文件

function About() {
  const navigate = useNavigate();

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

效果