使用ReactRouter自行渲染404頁面，無需任何其他組件

我正在使用[email protected]，我有以下代碼：

索引.tsx

const container = document.getElementById("app")!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

在我的App.tsx中，我有：

const App = () => {
  return (
    <>
      <Sidebar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="patients/:patient" element={<Patient />}>
          <Route path="overview" element={<Overview />} />
        </Route>
      </Routes>
    </>
  );
};

export default App;

在 Chrome 控制臺中，我收到以下警告：

utils.ts:767 You rendered descendant <Routes> (or called `useRoutes()`) at "/" (under <Route path="/">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

Please change the parent <Route path="/"> to <Route path="*">.

為什么我會收到此警告，我該如何解決？

即使我<Route path="/" element={<Home />} />從我的App.tsx

現在，只有/路線有效。它呈現<Sidebar />和<Home />組件。但是如果我去我應該http://localhost:3000/patients/blah/overview得到組件的時候得到組件（至少那是我想要得到的）<NotFound /><Overview />

uj5u.com熱心網友回復：

該App組件正在渲染后代路由，因此父路由應在其路由中附加一個尾隨"*"通配符匹配器。

例子：

const container = document.getElementById("app")!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/*" element={<App />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

為了處理“未知”路由，后代Routes組件必然需要渲染另一NotFound條路由。

const App = () => {
  return (
    <>
      <Sidebar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="patients/:patient" element={<Patient />}>
          <Route path="overview" element={<Overview />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
};

如果App組件真的只是作為“布局路線”來渲染Sidebar具有特定路線的組件，那么我建議將其轉換為實際的布局路線。

import { Outlet } from 'react-router-dom';

const AppLayout = () => {
  return (
    <>
      <Sidebar />
      <Outlet />
    </>
  );
};

...

const container = document.getElementById("app")!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route element={<AppLayout />}>
            <Route path="/" element={<Home />} />
              <Route path="patients/:patient" element={<Patient />}>
              <Route path="overview" element={<Overview />} />
            </Route>
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

標籤：反应打字稿反应路由器反应路由器dom

上一篇：有沒有辦法限制你的輸入元素只接受視頻？

下一篇：輸入未更新功能反應組件中的狀態