React Router map trough array

Question

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter  as Router, Switch, Route  } from "react-router-dom";   import Home from './components/Home';
    import About from './components/About';
    import Skills from './components/Skills';

    const titles=["About","Projects","Contact","Education","Skills","Resume"];

    ReactDOM.render(
        <Router>
            <Switch>
              {
                titles.map(title=>{
                if(title==="Home"){return false;}
                var path=title.toLowerCase();
                console.log(title)
                return (<Route exact path={"/"+path} component={title}/>)
              })
            }
              <Route exact path="/" component={Home}/>
              <Route component={NotFound}/>
            </Switch>
      </Router>,document.getElementById('root'));
<Route exact path="/" component={About}/>//if i put it like this it works(not in this place)

I dont know why it is not working i tried to remove "" after maping array but it didnt work aswell.

You seem to be using a string as a component. You can learn how to do that from here: https://stackoverflow.com/questions/29875869/react-jsx-dynamic-component-name — Titus, Apr 18 '18 at 19:33

score 3 · Accepted Answer · answered Apr 18 '18 at 19:40

Because const titles=["About","Projects","Contact","Education","Skills","Resume"]; is just an array of strings you will not be able to use the component=syntax (because these are strings not components)... What you could easily do is make titles an array of objects

const titles=[{name: "About", component: About...}];

... return (<Route exact path={"/"+title.name} component={title.component}/>)

Which would allow you to mostly keep what you already have.

React Router map trough array

1 Answers1