反应路由器不重新渲染相同<Link>道具上的组件

Question

Problem
I have two same React Router pointing to same component but there are two different props being passed. React Router doesn't seem to rerender the component thus the changes are not being shown

App.js

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

Header

<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>

Faq.js

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

The site works as expected if for example i go Home > About, or Home > FAQ, but in case i go FAQ > About or About > FAQ, the site doesn't rerender and the "accordion" doesn't pre expend even tho props get changed on FAQ.js because i console logged them.

Answer 1

Base on your code, the component will not re-render since you are not change the state which its trigger any re-render event for react life-cycle...

So, I prefer to change your code from location state to URL param, since base on your logic here, this what you needed, for example:

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

and in your Faq Component:

let { slug } = useParams();

now, when you click on Link:

About or Faq

re-render will trigger, since theirs a state is changed...

Note: :slug? we add a question mark here to make it optional...so you can send about or not.

Note 2: if you need to re-render base on state, simply you can add hook and lesion to location.state and trigger update manually on useState or by any action you like...like add a key props thats contain location.state.myKey value