Question

现在我具有以下结构：

index.js

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App/>
    </Router>
  </Provider>
,document.getElementById('root'));

App.js

// LOTS OF CODE...

console.log("Rendering App...");

return(
  <React.Fragment>
    <Header/>
    <AllRoutes/>
    <Footer/>
  </React.Fragment>
);

AllRoutes.js

// SOME CODE...

console.log("Rendering AllRoutes...");

return(
  <Switch>
    <Route exact path={ROUTE1} component={Component1}/>
    <Route exact path={ROUTE2} component={Component2}/>
  </Switch>
);

当我在ROUTE1和ROUTE2之间更改路线时，唯一正在渲染的组件是从<Route>渲染的组件。

应用程序未重新呈现，否则我会看到日志Rendering App...，但不是。

唯一呈现的是<Switch>中从<Route>'s呈现的组件。

我期望<App/>重新渲染，因为将会从<Router>的父项<App/>组件中生成一个新的位置对象。

PS：我正在使用它：

import { BrowserRouter as Router} from 'react-router-dom';

"react-router-dom": "^5.1.2" // ROUTER VERSION

在这种情况下如何更改路线而重新渲染App？

我应该使用useLocation钩子吗？对于SSR，它在服务器上的行为如何？

需要我的App顶级组件使用react-router-dom重新呈现路线更改

0 个答案: