CODEWITHSUNDEEP
javascriptreactjsreact-router
Adam
Adam

Reputation: 3128

Calling a component by name in React Router

I am using the latest version of React Router 4.1.2 with dynamic routing.

This is working for me:

routes.push(<Route key={tab.id} exact path="/" component={Dashboard}/>)

But this is not working:

routes.push(<Route key={tab.id} exact path="/" component={tab.component}/>)

Obviously because {tab.component} is a string (with the value of Dashboard) where it {Dashboard} is a function.

How can I make it work? How do I turn my string into the React component with the same name as the string?

Upvotes: 0

Views: 430

Answers (1)

Mike Cluck
Mike Cluck

Reputation: 32511

One easy way would be to place your components in a map so you can look them up by name. This is a very common pattern when you want to retrieve something via a string.

const componentByName = {
  Dashboard: <Dashboard />
};

routes.push(<Route 
  key={tab.id} 
  exact path="/" 
  component={componentByName[tab.component]}/>
);

Upvotes: 2

Related Questions