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)

我不知道为什么它不起作用我试图删除＆＃34;＆＃34;在maping数组之后但它也没有用。

Answer 1

因为const titles=["About","Projects","Contact","Education","Skills","Resume"];只是一个字符串数组，所以你将无法使用component=语法（因为这些是字符串而不是组件）...你可以轻松做的是将标题作为一个数组对象

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

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

这可以让你大部分保留已有的东西。

反应路由器映射槽数组

1 个答案: