dynamic routing in react js, component name from a string cannot be assigned in route

Question

I am currently trying to learn reactjs, and i came across on router-react-dom, i was trying to create a dynamic router, and found this solution How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras Solution Option 2 but i could not make it work on my end.

Here is my Main.js

import React, { Component } from 'react';
import { Switch, Route, Link, Redirect, withRouter} from 'react-router-dom'
import Home from './Home'
import Inbox from './Inbox'
import Trash from './Trash'
import Order from './Order'
import Protected from './Protected'
import Login from './Login'
import Forums from './Forums'
import NoMatch from './NoMatch'
import Promos from './Promos'

import SiteRoutes from './Nav'

const Main = () => (
  <main>
    <Switch> 
      {SiteRoutes.public.map(route => 
          <Route
            key={route.index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        )}

    </Switch>
  </main>
)
export default Main;

And here is my Nav.js

import React, { Component } from 'react';

const Data  = {
  public :[
        {
          path: "/",
          exact: true,
          main: 'Home'
        },
        {
          path: "/inbox",
          main: 'Inbox'
        },
        {
          path: "/trash",
          main: 'Trash'
        },
        {
          path: "/order/:value",
          main: 'Order'
        },
        {
          path: "/login",
          main: 'Login'
        },
        {
          path: "/forums",
          main: 'Forums'
        },
        {
          path: "/promos",
          main: 'Promos'
        }
      ]
};

export default Data;

I am trying to map and create a dynamic routes base from the Nav.js, but my problem is on the part of creating the Route on the component={route.main}, which assigns the route.main string value from Nav.js seems to not work in my situation. I followed what was on the link i mentioned above.

When i am clicking the link, console error is index.js:2178 Warning: <Home /> is using uppercase HTML. Always use lowercase HTML tags in React. i guess because it was a string and wont call the component, but on link i mentioned above seems to work on their end. I am wondering is there something missing in my code?

Thanks in advance.

Andrew Li · Accepted Answer · 2018-02-18 17:36:38Z

3

A string, when passed to React.createElement, creates a DOM element, not a custom component, which are usually only lowercase, hence the warning. Instead, I'd recommend just storing the component classes in Nav.js itself:

import Home from './Home'
import Inbox from './Inbox'
import Trash from './Trash'
import Order from './Order'
import Protected from './Protected'
import Login from './Login'
import Forums from './Forums'
import NoMatch from './NoMatch'
import Promos from './Promos'

const Data = {
  public: [
    {
      path: "/",
      exact: true,
      main: Home
    },
    …
  ]
}

So when React Router creates the component internally, it will create the element from a component class, not a string.

answered Feb 18, 2018 at 17:36

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

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

3 Comments

Wassapaks Over a year ago

Thanks @Li357, i will get back to you tomorrow and will try this, so you mean the link that i mention on the option 2 solution will not work?

Andrew Li Over a year ago

@Efx The second solution is wrong. As I mentioned in my answer, you can't pass a string, but you need a component class.

Wassapaks Over a year ago

Thanks @Li357, will be using your approach then.

Collectives™ on Stack Overflow

dynamic routing in react js, component name from a string cannot be assigned in route

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related