React Route - Rendering component in route from string in JSON object

Question

I am trying to render React components compared to the component names in JSON file I have created. For example, I want to render the TestSection component inside the component of my Route.

This is using the routing components provided by "react-router-dom".

Here is an example of me trying to create dynamic routes and being utterly confused why this wouldn't work:

(DynamicNavigaitonSwitcher.js)

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

navigation = [
    ["Explore", "/", "Explore", false],
    ["Profile", "/profile/", "TestSection", false], 
    ["Messages", "/messages/", "TestSection", false], 
    ["Listings", "/listings/", "TestSection", false], 
    ["Settings", "/settings/","TestSection", false],
    ["Login", "/login/","TestSection", false],
    ["Sign-up", "/signup/", "TestSection", false]
]

const Explore = () => {
  return (
      <div>
          <h1>Explore !!</h1>
      </div>
  )
}

const TestSection = () => {
  return (
      <p>Hey</p>
  )
}

const Components = {
  testsection: TestSection,
  explore: Explore
};

const DynamicRoutes = navigation.map((navItem) => {
    return (
            <Route path={navItem[1]} key={navItem[0]} name={navItem[0]} component={Components[navItem[2]]}/>
        )
  }
);

const DynamicNavigationSwitcher = () => {
  return (
    <div>
      <Switch>
            {DynamicRoutes}
      </Switch>
    </div>
  )
}

export default DynamicNavigationSwitcher;

marc_s · Accepted Answer · 2020-07-09 04:23:42Z

1

There are some syntax errors:

DynamicRoutes you should create like component and return the map of navigation.
Components: keys are wrong and different from navigation item position 2
BrowserRouter you should put and wrap in index.js around // if you have it, change BrowserRouter in this code by div and its ok
Route its the element to create a route

Test this code, I correct the previous errors and its worked for me:

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

const navigation = [
  ["Explore", "/", "explore", false],
  ["Profile", "/profile/", "testsection", false],
  ["Messages", "/messages/", "testsection", false],
  ["Listings", "/listings/", "testsection", false],
  ["Settings", "/settings/", "testsection", false],
  ["Login", "/login/", "testsection", false],
  ["Sign-up", "/signup/", "testsection", false]
];

const Explore = () => {
  return (
    <div>
      <h1>Explore !!</h1>
    </div>
  );
};

const TestSection = () => {
  return <p>Hey</p>;
};

const Components = {
  testsection: TestSection,
  explore: Explore
};

const DynamicRoutes = () => {
  return navigation.map(navItem => {
    return (
      <Route
        path={navItem[1]}
        key={navItem[0]}
        name={navItem[0]}
        component={Components[navItem[2]]}
      />
    );
  });
};

const DynamicNavigationSwitcher = () => {
  return (
    <BrowserRouter>
      <Switch>
        <DynamicRoutes />
      </Switch>
    </BrowserRouter>
  );
};

export default DynamicNavigationSwitcher;

edited Jul 9, 2020 at 4:23

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 18, 2020 at 0:16

Adrian

9457 silver badges14 bronze badges

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

2 Comments

Mads Frost Over a year ago

Ahhh thank you so much, I am little new to ReactJS and was trying to do best practices for React-Router. I am sorry for the badly formulated question but it was a great answer, thank you :)

JustCode Over a year ago

This is deprecated

Collectives™ on Stack Overflow

React Route - Rendering component in route from string in JSON object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related