react-router中的单击链接不会更改用户配置文件内容

Question

如果我在/josh个人资料中，然后单击以转到/marie个人资料，则该页面不会更改，我将继续在josh个人资料中，只有网址是marie。有什么想法吗？

我导入配置文件和react-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>

+用户是打开个人资料的另一个用户名。

任何想法，当我单击转到另一个人时如何更改个人资料？

谢谢。

Answer 1

您正在体验的是React Router的正常行为。

您上面编写的代码说，当任何路线与Profile匹配时，将渲染组件/:user。当您将路由从/josh更改为/marie时，它实际上仍然与Profile组件匹配，因此这就是为什么似乎什么都没有发生的原因。

但是，如果您查看Profile的道具，您会发现其中的值根据链接和路线而变化。

props.match.params.user

如果您想“转到另一个配置文件”，则只需对配置文件组件内部更改传入的道具做出反应。

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>