Breaking News: Grepper is joining You.com. Read the official announcement!

routing my mapped nav in react

Silly Shrike answered on September 24, 2022 Popularity 3/10 Helpfulness 3/10

answer routing my mapped nav in react

routing my mapped nav in react

Comment

import React from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Report from "./components/Report";
import Contact from "./components/Contact";
import About from "./components/About";
import Post from "./components/Post";

const menuItems = [
  { name: `Home`, path: `/` },
  { name: `Report`, path: `/report` },
  { name: `About`, path: `/about` },
  { name: `Contact`, path: `/contact` },
  { name: `Post`, path: `/posts/:post_id` }
];

const COMPONENT_MAP = {
  Home: Home,
  Report: Report,
  About: About,
  Contact: Contact,
  Post: Post
};

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Switch>
          {menuItems.map(item =>
            item.name == `Home` ? (
              <Route
                exact
                path={item.path}
                component={COMPONENT_MAP[item.name]}
              />
            ) : (
              <Route path={item.path} component={COMPONENT_MAP[item.name]} />
            )
          )}
        </Switch>
      </div>
    </BrowserRouter>
  );
}

Popularity 3/10 Helpfulness 3/10 Language javascript

Source: setiyaputra.me

Tags: javascript nav routing

Link to this answer
Share Copy Link

Contributed on Sep 24 2022

Silly Shrike

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

routing my mapped nav in react

Contents

More Related Answers

routing my mapped nav in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.