React Router 没有在 props 上重新渲染相同的 <Link> 组件答案

【问题标题】：React Router not rerendering same <Link> component on propsReact Router 没有在 props 上重新渲染相同的 <Link> 组件
【发布时间】：2021-12-15 20:11:45
【问题描述】：

问题
我有两个相同的 React Router 指向同一个组件，但是传递了两个不同的 props。 React Router 似乎没有重新渲染组件，因此没有显示更改

App.js

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route path="/" exact component={Main}/>
          <Route path="/FAQ" component={Faq}/>
        </Switch>
      </div>
    </Router>
    
  );
}

标题

<Link to="/" ><li className="active">HOME</li></Link>
<Link to={{ pathname: '/FAQ', state: { Display: "about"} }} ><li>ABOUT</li></Link>
<Link to={{ pathname: '/FAQ', state: { Display: ""} }} ><li>FAQ</li></Link>

常见问题解答.js

<Accordion className="accordion" preExpanded={[props.location.state.Display]} >

例如，如果我转到主页 > 关于或主页 > 常见问题解答，则该站点按预期工作，但如果我转到常见问题解答 > 关于或关于 > 常见问题解答，则该站点不会重新呈现并且“手风琴”不会预先显示即使道具在 FAQ.js 上发生变化也要花费，因为我在控制台记录了它们。

【问题讨论】：

标签： javascript html reactjs react-hooks react-router

【解决方案1】：

根据您的代码，组件不会重新渲染，因为您没有更改其触发任何用于反应生命周期的重新渲染事件的状态...

所以，我更喜欢将您的代码从位置状态更改为 URL 参数，因为根据您在这里的逻辑，这就是您所需要的，例如：

    <Switch>
      <Route path="/" exact component={Main}/>
      <Route path="/FAQ/:slug?" component={Faq}/>
    </Switch>

在您的常见问题组件中：

let { slug } = useParams();

现在，当您点击链接时：

<Link to="/Faq/about" ><li className="...">About</li></Link>

或

<Link to="/Faq" ><li className="...">Faq</li></Link>

将触发重新渲染，因为他们的状态已更改...

注意：:slug? 我们在此处添加了一个问号以使其成为可选...所以您可以发送或不发送。

注意 2：如果您需要根据状态重新渲染，只需将钩子和病变添加到 location.state 并在 useState 或您喜欢的任何操作上手动触发更新......比如添加一个包含的关键道具location.state.myKey 值

【讨论】：