Javascript reactdomrouter 链接组件没有按预期工作

我有一个Reaction应用程序，有两个页面-主页和旅行页面.Trip页面使用通过URL传入的tripID呈现.我的app.js如下所示:

function App() {
  return (<>
    <ThemeProvider theme={theme}>
      <Router>
        <Routes>
          <Route exact path='/' element={<Home />} />
          <Route path='/trip/:tripId' element={<TripComponent />} />
        </Routes>
      </Router>
    </ThemeProvider>
  </>
  );
}

我有一个全球导航栏，上面有tripIds个和Link个不同的菜单，可以导航到TripComponent.当我在"/"的路径上，我导航到"/trip/tripA"，我没有问题.但当我在"/trip/tripA"岁时，我想导航到"/trip/tripB"，它不起作用.我可以看到url发生了相应的变化，但我的TripComponent没有重新显示tripB的数据.我导航栏中菜单的代码如下:

ReactDOM.createPortal(<>
    <CustomModal setOpen={setShowTripList} title={"Saved Trips"}>
            <List>
                {trips && trips.length > 0 &&
                    trips.map((trip, index) => {
                        return (
                            <Link to={`/trip/${trip._id}`} >
                                <ListItemButton>
                                    <ListItemText id={trip._id} primary={trip.title} />
                                </ListItemButton>
                            </Link>
                        )
                    })
                }
            </List>
    </CustomModal>
</>
    , document.getElementById("portal"))

我搞不懂为什么会发生这种事.当我按Link导航到另一个URL时，它不应该卸载并重新挂载吗？