While using Route the site is not loading , when i am wrapping inside BroswerRoute only its working

user_19116572 0
Viewed 32

this my App.js Code , not able to find any solution .All item are imported and its working fine if its not wrapped in Route

import React from 'react';
import './App.css';
import { BrowserRouter, Route } from "react-router-dom"
import Home from './Pages/Home';
import SignUpPage from './Pages/SignUpPage';


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route >
          <Home />`enter code here`

        </Route>
        <Route path='/signup'>
          <SignUpPage />
        </Route>


      </BrowserRouter>

    </div >
  );
}

export default App;
react-router reactjs javascript
1 Answers

You're not wrapping your routes correctly, this is how it should be with react-router-dom v6:

import React from "react";
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import SignUpPage from "./Pages/SignUpPage";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/signup" element={<SignUpPage />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

You wrap your routes in a routes component, imported from react-router-dom. You can Then declare your route on one line <Route path="/insertPathHere" element={<YourComponent/>} />

user_105179680
Related