![](/img/trans.png)
[英]Error "Error: A <Route> is only ever to be used as the child of <Routes> element"
[英]Route Error- A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>
我收到以下錯誤。 我已經在命令提示符下安裝了 npm install react-router-dom。 這是我的 app.js 和 index.js 代碼
錯誤:
A 只能用作元素的子元素,永遠不會直接呈現。 請把你的包裹在一個。
請讓我知道我還必須添加什么才能使代碼正常工作
**App.Js**
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => {
return (
<div>
<p>Home</p>
</div>
);
};
const About = () => {
return (
<div>
<p>About</p>
</div>
);
};
const Contact = () => {
return (
<div>
<p>Contact</p>
</div>
);
};
class App extends Component {
render() {
return (
<Router>
<div>
<h1>W3Adda - Simple SPA</h1>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Users</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}
}
export default App;
索引.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
用 Routes 包裝 Route 時會出現什么錯誤?
<Routes>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Routes>
嘗試這個; (將組件更改為元素)
import { BrowserRouter as Router, Routes, Route } from "react-router-
dom";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/user" element={<CreateUser/>}/>
</Routes>
</Router>
);}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.