【React】使用react-router进行页面导航

2 年 ago

科, 颖

1 minute

使用react-router进行页面跳转

这次是使用React Router v6进行页面跳转。
看起来与v5的写法有所改变。

メインの画面

import "./styles/App.scss";
import { Route, Routes } from "react-router";
import { Home, About } from "-------";

function App() {
  return (
    <div className="app">
      <Routes>
        <Route
          path={`/home`}
          element={<Home />}
        ></Route>
        <Route
          path={`/about`}
          element={<About />}
        ></Route>
      </Routes>
    </div>
  );
}

export default App;

首先，我想要进行画面跳转，需要在代码中用标签进行封装。
在其中使用标签实现画面跳转。
path和element这两个属性分别用来设置跳转的路径和指定显示的组件。

コンポーネント

export const Home = () => {
  return <h1>Home</h1>;
};

export const About = () => {
  return <h1>About</h1>;
};