[React][react-router-dom v6] 使用Route 指向同一個資料夾不同分頁的方法 @ 葛瑞斯肯樂活筆記

我先描述一下我的版本

功能需求: 讓首頁有兩個連結，可以導向同一個資料夾裡面的不同分頁。

分頁功能開發時，原使用下述方式，但都會指向同一個頁面，覺得很怪。

function Layout(props) {
  return (
    <>
      <nav>
        <Link to="/components">ch5</Link>
        <Link to="/components" style={{ marginLeft: "20px" }}>
          ch6
        </Link>
      </nav>
      {props.children}
    </>
  );
}
function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/components" element={<Menu recipes={data} />} />
        <Route path="/components" element={<StarRating />} />
        <Route path="/*" element={<Layout />} />
      </Routes>
    </HashRouter>
  );
}

之後就加上":id"至下一個分頁，就會正常了。

function Layout(props) {
  return (
    <>
      <nav>
        <Link to="/components">ch5</Link>
        <Link to="/components/:id" style={{ marginLeft: "20px" }}>
          ch6
        </Link>
      </nav>
      {props.children}
    </>
  );
}
function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/components" element={<Menu recipes={data} />} />
        <Route path="/components/:id" element={<StarRating />} />
        <Route path="/*" element={<Layout />} />
      </Routes>
    </HashRouter>
  );
}

但是如果兩個通通加上":id"，又會重新導到同一個分頁，如下方:

function Layout(props) {
  return (
    <>
      <nav>
        <Link to="/components/:id">ch5</Link>
        <Link to="/components/:id" style={{ marginLeft: "20px" }}>
          ch6
        </Link>
      </nav>
      {props.children}
    </>
  );
}
function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/components/:id" element={<Menu recipes={data} />} />
        <Route path="/components/:id" element={<StarRating />} />
        <Route path="/*" element={<Layout />} />
      </Routes>
    </HashRouter>
  );
}

我找了一下:id的用法，原始說明請點我，:id 是指 dynamic routing，所以最佳解法是把路徑中的檔案寫死，就不會亂跑了。正確如下: 所以path是可以把js檔名寫出來的。

function Layout(props) {
  return (
    <>
      <nav>
        <Link to="/components/Menu">ch5</Link>
        <Link to="/components/ch6" style={{ marginLeft: "20px" }}>
          ch6
        </Link>
      </nav>
      {props.children}
    </>
  );
}
function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/components/Menu" element={<Menu recipes={data} />} />
        <Route path="/components/ch6" element={<StarRating />} />
        <Route path="/*" element={<Layout />} />
      </Routes>
    </HashRouter>
  );
}