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: stackoverflow.com/questions/29875869/… — Titus
– Titus, Commented Apr 18, 2018 at 19:33

Maxwelll · Accepted Answer · 2018-04-18 19:40:28Z

3

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.

answered Apr 18, 2018 at 19:40

Maxwelll

2,2121 gold badge19 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

React Router map trough array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related