本文介绍了错误"错误: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 );
更多推荐
错误"错误:A<Route>只能用作 <Routes> 的子级.元素"
发布评论