CODEWITHSUNDEEP
javascriptreactjs
shraddha
shraddha

Reputation: 1

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. Here is my code for app.js and index.js

Error:

A is only ever to be used as the child of element, never rendered directly. 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

 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();

Upvotes: 0

Views: 5522

Answers (2)

hasanyildiz
hasanyildiz

Reputation: 1

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>
);}

Upvotes: 0

Zamoule
Zamoule

Reputation: 19

What is the error when you wrap your Route with a Routes?

              <Routes>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
              </Routes>

Upvotes: 1

Related Questions