[英]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>
I am getting the below error.我收到以下错误。 I have installed npm install react-router-dom on the command prompt.
我已经在命令提示符下安装了 npm install react-router-dom。 Here is my code for app.js and index.js
这是我的 app.js 和 index.js 代码
Error:错误:
A is only ever to be used as the child of element, never rendered directly. A 只能用作元素的子元素,永远不会直接呈现。 Please wrap your in a.
请把你的包裹在一个。
Please let me know what additionally I have to add to make the code work请让我知道我还必须添加什么才能使代码正常工作
**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;
index.js索引.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();
What is the error when you wrap your Route with a Routes?用 Routes 包装 Route 时会出现什么错误?
<Routes>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Routes>
Try this;尝试这个; (change component to element)
(将组件更改为元素)
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.