How to create route like ( domain.com / dashboard/products ) In React JS

Question

I am new to ReactJS . I want to make route which may like (dashboard/product) . How it would be possible . I created but it not working properly .. could some please help me . Thanks .

<div style={wrapperStyle.MainWrapper}>
      <h1>Dashboard Page</h1>

      <div style={wrapperStyle.leftSideMenues}>
          <h1>Left Side Menues</h1>
          <div>

          </div>
      </div>
      <Router>
              <Switch>
                  <Route path='/' exact component= {Dashboard}/>
                  <Route path='/dashboard/:organizationContact' component={OraganizationContacts}/>
                  <Route path='/dashboard/products' component={Products}/>
                  <Route path='/sales' component={Sales}/>
                  <Route path='/purchase_orders' component={PurchaseOrders}/>
                  <Route path='/shipment' component={Shipments}/>
                  <Route path='/everything' component={Everything}/>
                  <Route path='/reports' component={Reports}/>
                  <Route path='/settings' component={Settings}/>
                  <Route path='/logout' component={LogOut}/>
                  <Route component={NotFound}/>
              </Switch>
          </Router>
  </div>

You might wanna look at https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4 — Subhendu Kundu, Mar 02 '19 at 15:43

score 2 · Accepted Answer · answered Mar 02 '19 at 15:44

2

You can reorder routes as following:

<Route exact path='/dashboard/products' component={Products}/>
<Route exact path='/dashboard/:organizationContact' component={OraganizationContacts}/>

answered Mar 02 '19 at 15:44

Umair Farooq

1,763
13
16

You mean to say that I should add `exact` with all routes ? – Mar 02 '19 at 15:47
Yes in react-router4 routes are matched using regex, so by adding `exact` it matches the exact route. – Umair Farooq Mar 02 '19 at 15:48
For example In Route . If User Click on `dashboard/user` I just want to display `User` Component Data . Now It showing both component data . How to avoid dashboard component data ? – Mar 02 '19 at 15:57
If route is `dashboard/user`, as per routes it should go to `OraganizationContacts` component – Umair Farooq Mar 02 '19 at 15:59

How to create route like ( domain.com / dashboard/products ) In React JS

1 Answers1