common header issue in react js

Question

I have problem with common header in react js. Currently login route is displaying common header and i dont want to show on my login page. If i go to contacts page than its showing common header which is perfect

import "./styles/App.scss";
import Navbar from "./components/elements/Navbar";
import Contacts from "./components/contacts/Contacts";
import { Provider } from "react-redux";
import store from "./store";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import AddContact from "./components/contacts/AddContact";
import EditContact from "./components/contacts/EditContact";
import Login from "./components/login/Login";
import Logout from "./components/logout/Logout";


function App(props) {
  return (
    <Provider store={ store }>
      <Router>
        <div className="App">
        {props.location.pathname !== '/login' ? <Navbar/> : null}
          <Route exact path="/login" component={ Login } />
          <div className="container">
            <div className="py-3">
              <Switch>
                <Route exact path="/" component={ Contacts } />
                <Route exact path="/logout" component={ Logout } />
                <Route exact path="/contacts/add" component={ AddContact } />
                <Route
                  exact
                  path="/contacts/edit/:id"
                  component={ EditContact }
                />
              </Switch>
            </div>
          </div>
        </div>
      </Router>
    </Provider>
  );
}

export default App;


  [1]: https://i.sstatic.net/7V0qi.png

Ajeet Shah · Accepted Answer · 2021-03-25 06:13:42Z

1

I think you meant to create Links in NavBar, not declare the Routes:

<Router>
  <div className="App">
    <div className="container">
      <div className="py-3">
        <Switch>
          <Route exact path="/login" component={Login} />
          <Route>
            <Navbar />
            <Switch>
              <PrivateRoute exact path="/" component={Contacts} />
              <PrivateRoute exact path="/logout" component={Logout} />
              <PrivateRoute exact path="/contacts/add" component={AddContact} />
              <PrivateRoute
                exact
                path="/contacts/edit/:id"
                component={EditContact}
              />
            </Switch>
          </Route>
        </Switch>
      </div>
    </div>
  </div>
</Router>

NavBar:

function Navbar() {
  const someId = 123 // example
  return (
   <>
    <Link to="/">Login</Link>
    <Link to="/logout">Logout</Link>
    <Link to="/contacts/add">Add Contacts</Link>
    <Link to={`/contacts/edit/${someId}`}>Edit Contact</Link>
   </>

  )
}

After this, you are most likely to be looking for authentication. I recently wrote an answer on authenticated or protected routes i.e. PrivateRoute.

Also, note that All children of a Switch should be Route or Redirect elements.

edited Mar 25, 2021 at 6:13

answered Mar 24, 2021 at 18:01

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

2 Comments

David Kohli Over a year ago

I have modify my code. Please check attach image

David Kohli Over a year ago

Its Solved! Thanks ajeet for your help!

Sean · Accepted Answer · 2021-03-25 04:03:59Z

1

You can only show the <Navbar/> when it's not the login page and you need to keep the login page inside the switch for the pages to work.

return (
    <Provider store={ store }>
      <Router>
        <div className="App">
          {props.location.pathname !== '/login' ? <Navbar/> : null}
          <div className="container">
            <div className="py-3">
              <Switch>
                <Route exact path="/login" component={ Login } />
                <Route exact path="/" component={ Contacts } />
                <Route exact path="/logout" component={ Logout } />
                <Route exact path="/contacts/add" component={ AddContact } />
                <Route
                  exact
                  path="/contacts/edit/:id"
                  component={ EditContact }
                />
              </Switch>
            </div>
          </div>
        </div>
      </Router>
    </Provider>
  );

answered Mar 25, 2021 at 4:03

Sean

9755 silver badges15 bronze badges

6 Comments

Sean Over a year ago

Make sure you take in the props for the component. function App (props){}

David Kohli Over a year ago

Error is changed now -> TypeError: Cannot read property 'pathname' of undefined

Sean Over a year ago

Can you edit your question and show the whole component please. You should have props if you're using react router which it looks like you are

David Kohli Over a year ago

I have modified my question and also attached an image

Sean Over a year ago

Console.log your props and try and access the pathname and then use that to show the navbar

|

Collectives™ on Stack Overflow

common header issue in react js

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related