Маршрутизация с итерационным списком в React JS

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

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>

Вы говорите, что хотите ссылаться на разные пути или хотите, чтобы имя отображалось по-другому? Если вы хотите ссылаться на разные пути, вам нужно изменить <Link to = "/">{name}</Link> на что-то динамическое, например <Link to = {`/${name}`}>{name}</Link>, потому что вы сейчас жестко кодируете ссылку. Еще одно предложение - попробовать стрелочную функцию: {names.map((name, index) => (<Link to = {`/${name}`}>{name}</Link>)}.

— 21.09.2018 18:43

его работы большое спасибо, чувак

— 22.09.2018 06:25

Без проблем. Рад помочь.

— 22.09.2018 11:54

reactjs react-router

21.09.2018 18:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

109

Ответы 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>
    )
   }

@ MD.ALIMUL Alrazy Я обновил свой ответ, попробуйте сейчас

— 22.09.2018 06:34

21.09.2018 18:59