0
import './App.css';
import PrimaryNavbar from './components/PrimaryNavbar';
import SecondaryNavbar from './components/SecondaryNavbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Logo from './components/Logo';
import MobileNavbar from './components/MobileNavbar';

import Home from './components/Contents/Home'
import Deals from './components/Contents/Deals';
import Goto from './components/Contents/Goto';
import SignUp from './components/Contents/SignUp';
import Todo from './components/Contents/Todo';
import Cards from './components/Cards';

function App() {
  return (
    <>
      <Router>
        <div className="d-flex justify-content-around">
          <PrimaryNavbar />
          <Logo />
          <SecondaryNavbar />
          <MobileNavbar />
        </div>
        <Home />
        <Cards />
        <Routes>
          <Route path="/" exact component={<Home />} />
          <Route path="/deals" component={<Deals />} />
          <Route path="/goto" component={<Goto />} />
          <Route path="/todo" component={<Todo />} />
          <Route path="/signup" component={<SignUp />} />
        </Routes>
      </Router>
    </>
  );
}
export default App;

I tried every possible way to link to a new page but failed. I tried using switch(v5) too. When I tried

<Route path="/" exact element={<Home />} > </Route>

I was able to get the content from my other pages, but they all got at the bottom. Every time, I switch to the new page the content comes at the bottom with the above code. But with the first code, I don't even get the content from other pages, the links changes without giving any content.

Shachin Magar
  • 1
  • 3

1 Answers1

0

Try with element instead of component. I believe component is the way to go in v6.
https://reactrouter.com/docs/en/v6/getting-started/overview

          <Route path="/" exact element={<Home />} />
          <Route path="/deals" element={<Deals />} />
          <Route path="/goto" element={<Goto />} />
          <Route path="/todo" element={<Todo />} />
          <Route path="/signup" element={<SignUp />} />
kadenee
  • 13
  • 4
  • I tried that way, it gives me the content of another page but at the bottom of the page. All the other pages include the home page content on the top and their respective content follow at the bottom. i don;t know what's wrong – Shachin Magar Dec 28 '21 at 05:02
  • It may be because you are returning the `` element in both `} /> `and under the navbar, ` **** ` – kadenee Dec 28 '21 at 08:13
  • I had a Hero section inside that , after you said I tried placing the hero section on App.js – Shachin Magar Dec 28 '21 at 10:10
  • Did that work? I imagine you just wanted the `hero` on top of the home page, and not at the top of every page. If that is what you're going for, you should return the `hero` element inside of the `Home` element to be rendered on the /Home path. – kadenee Dec 28 '21 at 13:58
  • I figured it out. Yes, I had the hero section rendered on every page, which I just placed only on the Hone page and it is solved. Thanks to u all for reaching out. I thank u for ur time. – Shachin Magar Dec 28 '21 at 18:09