MERN应用：渲染时的React＆＃x27;

Question

问题摘要

我正在使用MERN应用程序。

到目前为止，我已经建立了后端，并且只是开始在前端添加路线。

在将路线添加到前端的过程之后，出现了问题。问题是屏幕上没有任何东西出现。在控制台中，以下错误显示：

问题详细信息

目录快照

Answer 1

在中，React-Router-dom@6 route组件只能由ROUTES组件或其他ROUTE> ROUTE> ROUTE渲染。成分。 路由组件API也与V6发生了显着更改，它们在单个元素 prop prop a react> react node。

1. 将路由组件包装在路由组件中。
2. 在路由组件'element prop作为JSX

示例：

// import Routers
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";

import Navbar from "./components/navbar.component";
import ExerciseList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
      <Navbar/>
      <br/>
      <Routes>
        <Route path="/" element={<ExerciseList />} />
        <Route path="/edit/:id" element={<EditExercise />} />
        <Route path="/create" element={<CreateExercise />} />
        <Route path="/user" element={<CreateUser />} />
      </Routes>
    </Router>

  );
}

请参阅从v5 指南迁移，以进一步破坏V6的变化。