Щелкните ссылку из реактивного маршрутизатора, не меняя содержимое профиля пользователя

Question

Если я нахожусь в профиле /josh и нажимаю go на /marie профиль, страница не изменится, я продолжу в профиле jo sh, только URL-адрес будет mar ie. есть идеи, почему?

Я импортирую профиль и response-router-dom

import { Route, Link, Switch } from 'react-router-dom';
import Profile from '../../containers/Profile/Profile'; //this.props.match.params.user

У меня есть этот маршрут:

<Route path="/:user" component={Profile} />

Я вызываю другой профиль следующим образом:

<li><Link to={"/"+user} onClick={props.closed}>Profile</Link></li>

+ user - другое имя пользователя для открытия профиля.

Есть идеи, как я могу изменить профиль, когда я нажимаю go на другой?

спасибо.

Answer 1

То, что вы испытываете, - это нормальное поведение React Router.

В коде, который вы написали выше, говорится, что нужно отображать компонент Profile, когда любой маршрут соответствует /:user. Когда вы меняете маршруты с /josh на /marie, он фактически по-прежнему соответствует компоненту Profile, поэтому кажется, что ничего не происходит.

Однако, если вы посмотрите на реквизиты вашего Profile, вы заметите, что там есть значение, которое меняется в зависимости от ваших ссылок и маршрутов.

props.match.params.user

Если вы хотите «go в другой профиль», вам просто нужно реагировать на изменение входящего реквизита внутри вашего компонента профиля.

const { render } = ReactDOM;
const { MemoryRouter, Route, Link } = ReactRouterDOM;

function App() {
  return (
    <div>
      <header>My App</header>
      <ul>
        <li><Link to="/josh">Josh</Link></li>
        <li><Link to="/marie">Marie</Link></li>
      </ul>
      <main>
        <Route component={Profile} path="/:user" />
      </main>
    </div>
   );
}

function Profile(props) {
  return <div>{props.match.params.user}'s Profile</div>
}

render(<MemoryRouter><App /></MemoryRouter>, document.querySelector('#root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.min.js"></script>
<div id="root"></div>