How do I route from another component in React JS

Question

What I want to achieve..

Able to route in two different navbars

route components here

when you login

route dashboard components here

More explanation

I have a landing page component

<navbar/>
  about page, contact, features and pricing are been routed here
<Router>
  <Switch>
   <Route exact path="/pricing" component={Pricing}/>
   <Route exact path="/about" component={About}/>
   <Route exact path="/" component={Home}/>
 <Switch/>
</Router>
<footer/>

now when you're logged in

there's a new navbar and sidebar for the dashboard

all other dashboard components should be routed here

<Router>
 <Navbar />
 <Switch>
   <Route exact path="/dashboard/edit" component={Edit} />
   <Route exact path="/dashboard/invite" component={Invite} />
   <Route exact path="/dashboard" component={Dashboard} />
 <Switch>
 <Sidebar />
<Router>

current solution is to repeat the sidebar and navbar components on every dashboard components then declare them as route path in the router wrapper

I do not want to repeat the sidebar and navbar on every dashboard component

Please let me know if there's any better way to achieve this

You didn't didn't include the code for Sidebar or Navbar. I don't understand what you are asking, by the looks of your code you just have these components once in a top-level component. You wouldn't need to put then anywhere else and they will be rendered anywhere thst top level component is used — dpwr
– dpwr, Commented Dec 12, 2020 at 9:54

Alireza Bagheri · Accepted Answer · 2020-12-12 11:45:26Z

2

you can have a top level Dashboard component and a top level home component that are routed without the 'exact' keyword. so your App.js looks like this:

<>
  <Router >
    <Switch>
      <Route path="/dashboard" component={TopLevelDashboard} />
      <Route path="/" component={TopLevelHome} />
    </Switch>
  </Router >
</>

then put the subcomponents of Dashboard inside TopLevelDashboard.js like this:

<>
  <Navbar />  {/* the navbar in Dashboard components */}
  <Switch >
    <Route exact path="/dashboard/edit" component={Edit} />
    <Route exact path="/dashboard/invite" component={Invite} />
    <Route exact path="/dashboard" component={Dashboard} />
  </Switch >
</>

and similarly the Top level home component looks like this:

<>
  <navbar /> {/* the navbar in Home components */}
  <Switch >
    <Route exact path="/pricing" component={Pricing}/>
    <Route exact path="/about" component={About}/>
    <Route exact path="/" component={Home}/>
  </Switch >
  <footer />
</>

answered Dec 12, 2020 at 11:45

Alireza Bagheri

913 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UncleBigBay Over a year ago

this worked perfectly for me...I knew there should be some implementation like this...but it was actually the "exact" that I was missing....Kudos to you Bagheri

Nemanja Lazarevic · Accepted Answer · 2020-12-12 09:55:53Z

0

You should put your code into a high-level component like App.js and add logic to hide one navbar when the user is not logged in.

In components where you don't want your navbars to be shown, like the Login page you can hide it by leveraging useLocation hook to get the current pathName and compare it with the pathName in question.

answered Dec 12, 2020 at 9:55

Nemanja Lazarevic

1,0478 silver badges12 bronze badges

Collectives™ on Stack Overflow

How do I route from another component in React JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related