Маршрутизация с использованием списка итераций в реагировать

Question

Каждая маршрутизация списка показывает одну и ту же маршрутизацию. Так, как я могу пройти каждый элемент списка каждой маршрутизацией. Но маршрутизация показывает тот же путь.

var names = ['Home', 'About', 'Contact'];
    <Router>
      <div>
    <ul>
                    {names.map(function(name, index){
                        return <li key={ index }><Link to="/">{name}</Link></li>;
                      })}
                </ul>
        <hr/>

        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/contact" component={Contact}/>
      </div>
    </Router>

Answer 1

Из вашего вопроса я понимаю, что ссылка возвращает тот же путь на карте.Таким образом, чтобы получить различные пути в карте, попробуйте ниже код

render(){
   const names = ['Home', 'About', 'Contact'];
   const nameItems = names.map((name, index) => {
       let url =  "/";
       if( name == "Home"){
           url = "/";
       }else{
           url = name.toLowerCase();
       }
         return <li key={ index }><Link to={url}>{name}</Link></li>;
       })} 
    return(
        <Router>
  <div>
<ul>
               {nameItems}
            </ul>
    <hr/>

    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </div>
</Router>
    )
   }