错误"错误:A<Route>只能用作 <Routes> 的子级.元素"

本文介绍了错误"错误:A<Route>只能用作 <Routes> 的子级.元素"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

I am trying to use routing for the first time and followed the exact instructions from Udemy:

File App.js:

import { Route } from "react-router-dom"; import Welcome from "./Pages/Welcome"; import Game from "./Pages/Game"; import Leaderboard from "./Pages/Leaderboard"; function App() { return ( <div> <Route path = "/welcome"> <Welcome /> </Route> <Route path = "/game"> <Game /> </Route> <Route path = "/leaderboard"> <Leaderboard /> </Route> </div> ); } export default App;

File index.js

import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from "./App"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );

I get the following error:

Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes.

Where have I gone wrong?

解决方案

Yes, in react-router-dom version 6 it is a bit different. Please look as the sample below.

React Router tutorial

import { render } from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Expenses from "./routes/expenses"; import Invoices from "./routes/invoices"; const rootElement = document.getElementById("root"); render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="expenses" element={<Expenses />} /> <Route path="invoices" element={<Invoices />} /> </Routes> </BrowserRouter>, rootElement );