javascript - React Router map trough array - Stack Overflow

admin管理员组

文章数量:1024680

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter  as Router, Switch, Route  } from "react-router-dom";   import Home from './ponents/Home';
    import About from './ponents/About';
    import Skills from './ponents/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} ponent={title}/>)
              })
            }
              <Route exact path="/" ponent={Home}/>
              <Route ponent={NotFound}/>
            </Switch>
      </Router>,document.getElementById('root'));
<Route exact path="/" ponent={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.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter  as Router, Switch, Route  } from "react-router-dom";   import Home from './ponents/Home';
    import About from './ponents/About';
    import Skills from './ponents/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} ponent={title}/>)
              })
            }
              <Route exact path="/" ponent={Home}/>
              <Route ponent={NotFound}/>
            </Switch>
      </Router>,document.getElementById('root'));
<Route exact path="/" ponent={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.

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Apr 18, 2018 at 19:30 curious ladcurious lad 16422 silver badges1414 bronze badges 1

• You seem to be using a string as a ponent. You can learn how to do that from here: stackoverflow./questions/29875869/… – Titus Commented Apr 18, 2018 at 19:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

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

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

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

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter  as Router, Switch, Route  } from "react-router-dom";   import Home from './ponents/Home';
    import About from './ponents/About';
    import Skills from './ponents/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} ponent={title}/>)
              })
            }
              <Route exact path="/" ponent={Home}/>
              <Route ponent={NotFound}/>
            </Switch>
      </Router>,document.getElementById('root'));
<Route exact path="/" ponent={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.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter  as Router, Switch, Route  } from "react-router-dom";   import Home from './ponents/Home';
    import About from './ponents/About';
    import Skills from './ponents/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} ponent={title}/>)
              })
            }
              <Route exact path="/" ponent={Home}/>
              <Route ponent={NotFound}/>
            </Switch>
      </Router>,document.getElementById('root'));
<Route exact path="/" ponent={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.

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Apr 18, 2018 at 19:30 curious ladcurious lad 16422 silver badges1414 bronze badges 1

• You seem to be using a string as a ponent. You can learn how to do that from here: stackoverflow./questions/29875869/… – Titus Commented Apr 18, 2018 at 19:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

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

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

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

本文标签： javascriptReact Router map trough arrayStack Overflow