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.stack.imgur.com/7V0qi.png

Ajeet Shah · Accepted Answer · 2021-03-25T06:13:42.347

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.

I have modify my code. Please check attach image – David Kohli Mar 25 '21 at 04:29 — David Kohli, Mar 25 '21 at 04:29
Its Solved! Thanks ajeet for your help! – David Kohli Mar 25 '21 at 10:54 — David Kohli, Mar 25 '21 at 10:54

score 1 · Answer 2 · answered Mar 25 '21 at 04:03

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 '21 at 04:03

Sean

936
4
15

Make sure you take in the props for the component. `function App (props){}` – Sean Mar 25 '21 at 04:32
Error is changed now -> TypeError: Cannot read property 'pathname' of undefined – David Kohli Mar 25 '21 at 04:34
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 – Sean Mar 25 '21 at 04:40
I have modified my question and also attached an image – David Kohli Mar 25 '21 at 04:50
Console.log your props and try and access the pathname and then use that to show the navbar – Sean Mar 25 '21 at 05:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230349/discussion-between-david-kohli-and-sean-reilly). – David Kohli Mar 25 '21 at 05:39

common header issue in react js

2 Answers2