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

Question

[denis_21321321]

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

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>

    )
};

Answer 1

[Zhanna_K]

Зачем использовать 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>
  );
};

Все должно работать как нужно

Answer 2

[Kirill Makarov]

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