@denis_21321321

При использовании NavLink путь ставится поверх другого?

При нажатии, например, на message, изменяется правильно путь(beta-site/modernWelcome/messages), но если нажать на friends, вместого того, чтобы стать beta-site/modernWelcome/friends он изменяется на beta-site/modernWelcome/modernWelcome/friends, если сделать <NavLink to='/message'>Message</NavLink> , тогда он правильно изменяется, но мне нужно с modernWelcome.
Страница находится на пути beta-site/modernWelcome .
5f6ddf27cdcd6243364537.png после 5f6ddf31b10d2266733281.png

const App = (props) => {
    return (
        <Router>
            <div>
              <Route exact path='/modernWelcome/friends' render={() => <Friends friends={props.state.friends}/>}/>
              <Route exact path='/modernWelcome/messages' render={() => <Messages messages={props.state.messages}/>}/>
              <NavLink to='modernWelcome/messages'>Message</NavLink>
              <NavLink to='modernWelcome/friends'>Friends</NavLink>
            </div>
        </Router>

    )
};
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ответы на вопрос 2
Zhanna_K
@Zhanna_K
in progress
Зачем использовать Route и Navlink на одном уровне?

const App = () => {
  return (
    <div>
      <Route exact path='/modernWelcome' component={MainPage} />
      <Route exact path='/modernWelcome/messages' component={Messages} />
     <Route exact path='/modernWelcome/friends' component={Friends} />
    </div>
  );
};


И в компоненте MainPage уже будут навлинки
const MainPage = (props) => {
  return (
    <div>
      <h1>MainPage</h1>
      <NavLink to='modernWelcome/messages'>Message</NavLink>
      <NavLink to='modernWelcome/friends'>Friends</NavLink>
    </div>
  );
};


Все должно работать как нужно
Ответ написан
kirbi1996
@kirbi1996
Navlink используется если не ошибаюсь в меню, чтобы была возможность подсвечивать его, хотя это можно достичь и другими методами. А на одном уровне с роутами должны использлвться роуты. Для обхода совпадений можно добавить атрибут exact
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы