CODEWITHSUNDEEP
reactjsreact-router
Wes
Wes

Reputation: 61

React Router, removing nav/side bar in certain routes

Im pretty new to react, my react app has a side bar on each route. And I'd like to create a landing page separate from that side bar. I looked at other answers but I couldn't seem to find a working fix . below is my index.js file and what I've tried

const routing = (

    <Router>

      {/* <!-- Side navbar --> */}

      <div class="sidenav">
      <img src={ require('./Newlogo.png') } id='logo' />
        <div class="container nav_items">
          <div class="row">
            <Link to="/home">Home</Link>
          </div>
          <div class="row">
            <Link to="/secret">Secret</Link>
          </div>
          <div class="row">
            <Link to="/discover">Discover</Link>
          </div>
          <div class="row">
            <Link to="/create/recipe">Create Recipe</Link>
          </div>

          <div class="row">
            <Link to="/admin">Admin Tools</Link>
          </div>
          <div class="row">
            <Link onClick={logout}>Logout</Link>
          </div>
        </div>
      </div>


    {/* <!-- Page content --> */}

        <div class="main">
          <Route path="/landing" component={Landing} />      
          <Route path="/" component={App} />
          <Route path="/croptest" component={CropTest} />
          <Route path='/profile/:id' component={withAuth(Profile)}/>  
          <Route path="/home" component={withAuth(Home)} />
          <Route path="/secret" component={withAuth(Secret)} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />

        </div>
    </Router>
  )

    ReactDOM.render(routing, document.getElementById('root'))

Upvotes: 0

Views: 423

Answers (1)

tareq aziz
tareq aziz

Reputation: 777

1) Define your layout like follows by wrapping your two <div/> with <div className="row">. I think its up to you how do you want to prepare your layout

<div className="row">
    <div className="sidenav col-2">
...
    </div>
    <div className="main col-2">
...
    </div>
</div>

2) Try to use react-router-dom instead of react-router

3) Import the required references

import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";

4) Wrap your all routes with <Switch>

<Switch>
    <Route ... />
    <Route ... />
    <Route ... />
</Switch>

5) try to use exact in your route 

<Route exact path="/" component={App} />

6) finally change all your class to className because className is the react standard

Hopefully it work

Upvotes: 1

Related Questions