React Router刷新URL但不刷新页面

Question

我有一些动态创建的链接和路由（React Router），其路径类似于/ details / {id}（使用useParams）

当我从“ /”路径中单击该链接时，一切正常，但是当我从另一条动态生成的路由（/ details / {id}）中单击该链接时，它只是更新URL（特别是ID），而不是页面内容< / p>

如果我在BrowserRouter上设置了强制刷新道具，或者只是手动刷新页面，一切都会开始正常，但是我不想每次都刷新整个页面。

const App = () => {
    return(
    <BrowserRouter>
      <div>
          <Route path='/' exact>
            <FirstComponent id={id}/>
          </Route>
          <Route path={`/details/:id`}>
            <SecondComponent anotherId={anotherId}/>
          </Route>
      </div>
    </BrowserRouter>
  )
}

const FirstComponent = ({id}) => {
    return <Link to=`/details/${id}`></Link> //renders SecondComponent
}



const SecondComponent = ({anotherId}) => {
    const {id} = useParams()
  //does something with id
    return <Link to=`/details/${anotherId}`></Link> //Should render SecondComponent with another id but it doesn't

}