从 React-Router-dom v5 转换为 v6 页面内容未显示

Question

我在将代码从满足 React-Router-Dom v5 要求转换为 V6 要求时遇到问题。 由于某种原因，我的网页内容未在浏览器中加载。 请问有什么帮助吗？ 我试过做研究并实施不同的解决方案，但我无法解决这个问题。

这是我的 App.js https://i.stack.imgur.com/USV67.png

这是我的 index.js https://i.stack.imgur.com/KG96P.png

Answer 1

将TopBar移出Routes组件，并将Single组件移到路由的element道具上。 Routes组件的唯一有效子组件是React.Fragment和Route组件， Route Route 。

例子：

function App() {
  const user = false;

  return (
    <>
      <TopBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/register" element={<Register />} />
        <Route path="/login" element={<Login />} />
        <Route path="/write" element={<Write />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/post/:postId" element={<Single />} />
      </Routes>
    </>
  );
}