Home > database >  I wrote code on react, add router-dom. Why i can't see my page on React?
I wrote code on react, add router-dom. Why i can't see my page on React?

Time:11-21

I try launch my project on react. I wrote Router and when i launch project i see nothing

It's my code, what's wrong ?

import "./App.css";
import "./Components/MainContent/Main/MainContent.module.css"
import "./Components/Header/Header.module.css"
import "./Components/Navbar/Navbar.module.css"
import Header from "./Components/Header/Header";
import Navbar from "./Components/Navbar/Navbar";
import MainContent from "./Components/MainContent/Main/MainContent";
import {Router, Route, Routes} from "react-router-dom";
import Catalog from "./Components/MainContent/Catalog/Catalog"
import Busket from "./Components/MainContent/Busket/Busket"
import Contacts from "./Components/MainContent/Contacts/Contacts"
import Support from "./Components/MainContent/Support/Support"


function App() {
    return (
        <div className="appWeb">
            <Header />
            <Navbar />
            <Router>
                <Routes>
                <Route path='/MainContent' element={<MainContent/>} />
                <Route path='/Catalog' element={<Catalog/>} />
                <Route path='/Busket' element={<Busket/>} />
                <Route path='/Contacts' element={<Contacts/>} />
                <Route path='/Support' element={<Support/>} />
                </Routes>
            </Router>
        </div>

  );
}


export default App;

I try wrap div className="appWeb" in Router, didn't help

CodePudding user response:

You will see nothing because there's no Route with path="/", just add it or navigate to some path instead

CodePudding user response:

I'm not a specialist in React but this might help

<BrowserRouter>
    <Routes>
        <Route
         index
         path={ "Your Path" }
         exact
         element={<YourComponent/>}
         />
         <Route
          path={"Your Path"}
          exact
          element={<YourComponent />}
         />
    </Routes>
</BrowserRouter>

Use BrowserRouter insead of Router. You can also add the attribute index to one of your Route to indicate that this route is your application start route

  • Related