当我尝试渲染组件时 React Router 不工作

Question

我尝试使用 React Router 渲染组件，但它似乎不起作用。在 React 路由器上进行更改后，我找不到我做错了什么。我没有收到任何错误。组件只是不在页面上呈现。我也尝试添加 BrowserRouter，没有任何变化。

我的代码

import './default.scss'
import { Routes ,Route  } from 'react-router-dom';
import MainLayout from './layouts/MainLayout';

import Homepage from './pages/Homepage';
import Registration from './pages/Homepage/Registration';

function App() {
  return (
    
      <Routes>
         <Route exact path="/" render={() => (
           <MainLayout>
             <Homepage/>
           </MainLayout>
         )}
          ></Route>
         <Route path="/registration" render={() => (
           <MainLayout>
             <Registration/>
           </MainLayout>
         )}
          ></Route>
         </Routes>
         
  );
}

export default App;

Answer 1

你添加了 BrowserRouter 了吗？？

抛出代码是哪个错误？

Answer 2

猜猜你在使用react-route-dom v6，你可以查看指南upgrading from v5

更改路线如下

<Routes>
  <Route
    path="/"
    element={
      <MainLayout>
        <Homepage/>
      </MainLayout>
    }
  />
  <Route
    path="registration"
    element={
      <MainLayout>
        <Registration/>
      </MainLayout>
    }
  />
</Routes>

或使用useRoutes

let element = useRoutes([
  // These are the same as the props you provide to <Route>
  {
    path: "/",
    element:
      <MainLayout>
        <Homepage/>
      </MainLayout> },
  {
    path: "registration",
    element:
      <MainLayout>
        <Registration/>
      </MainLayout>
  },
  // Not found routes work as you'd expect
  { path: "*", element: <NotFound /> },
]);

当我尝试渲染组件时 React Router 不工作

React Router doesnt work when I try to render the components

reactjs

react-router