Re-use navbar component with multiple components

user_15325388 0
Viewed 187

I have a simple question. What is the best way to use a navbar with multiple components using react router? Just let me show the code so you can understand what I'm trying to say.

import React from "react";
import "./App.css";

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

import Auth from "./website/Auth/Auth";
import SocialMedia from "./website/SocialMedia/SocialMedia";
import SingleUser from "./website/SingleUser/SingleUser";
import Search from "./website/Search/Search";
import SinglePhoto from "./website/SinglePhoto/SinglePhoto";

import Navbar from "./components/Navbar/Navbar";

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Auth}>
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
        <Navbar>
          <Route exact path="/profile/:id" component={SingleUser} />
          <Route exact path="/socialmedia" component={SocialMedia} />
          <Route exact path="socialmedia/search" component={Search} />
          <Route exact path="socialmedia/photo/:id" component={SinglePhoto} />
        </Navbar>
      </Switch>
    </Router>
  );
}

export default App;

So I have to reuse my Navbar component, and I tried to use <Navbar />, then the other routes below, but that wasn't working, and when I put <Navbar> </Navbar> that worked and the other components will appear, but is that the way I reuse my Navbar component?

Thanks for your time !!

reactjs javascript
2 Answers
import React from "react";
import "./App.css";

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

import Auth from "./website/Auth/Auth";
import SocialMedia from "./website/SocialMedia/SocialMedia";
import SingleUser from "./website/SingleUser/SingleUser";
import Search from "./website/Search/Search";
import SinglePhoto from "./website/SinglePhoto/SinglePhoto";

import Navbar from "./components/Navbar/Navbar";

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Auth}>
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
        <Route Component={Navbar}>
          <Route exact path="/profile/:id" component={SingleUser} />
          <Route exact path="/socialmedia" component={SocialMedia} />
          <Route exact path="socialmedia/search" component={Search} />
          <Route exact path="socialmedia/photo/:id" component={SinglePhoto} />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Try this!

user_156113560

If you want the Navbar to render only on certain routes then render it only on certain routes. Render the Navbar into a route outside the Switch and specify all the paths you want it to be rendered on in an array on the path prop.

Additional notes:

  1. Within the Switch component, order and path specificity matter, reorder your routes to specify more specific paths before less specific paths. This allows you to not need to specify the exact prop for every route.
  2. Don't specify both a component prop and render children on a single Route, see Route render methods. Just render the Redirect or Auth component as children.

Code:

function App() {
  const logIn = JSON.parse(localStorage.getItem("token"));

  return (
    <Router>
      <Route
        path={["/profile", "/socialmedia"]}
        component={Navbar}
      />
      <Switch>
        <Route path="/profile/:id" component={SingleUser} />
        <Route path="socialmedia/photo/:id" component={SinglePhoto} />
        <Route path="socialmedia/search" component={Search} />
        <Route path="/socialmedia" component={SocialMedia} />
        <Route path="/">
          {logIn ? <Redirect to={`/profile/${logIn.data.id}`} /> : <Auth />}
        </Route>
      </Switch>
    </Router>
  );
}
user_86908570
Related