Question

我有一个正在使用的简单React应用，它利用React Router。我的应用程序从app.js开始，并在app.js中具有以下路由器设置：

<BrowserRouter>
  <MuiThemeProvider theme={theme}>
    <NavigationBar onLogout={self.userLoggedOut} loggedIn={self.state.loggedIn} />
    <div className="content-area container-fluid">
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/page1" component={Page1} />
        <Route exact path="/page2" component={Page2} />
      </Switch>
    </div>
  </MuiThemeProvider>
</BrowserRouter>

在我的app.js构造函数中，我有console.log触发一条消息，指出构造函数已被调用。最初，我第一次进入应用程序时会看到该消息触发，然后，如果我使用链接在页面之间导航，则看不到任何后续消息。但是，如果我进入浏览器地址栏并手动输入url（例如，http://localhost:3000/login），则页面将成功加载，但app.js构造函数的消息会再次触发。您如何获得一个react / react-router应用程序以接受与链接相同的手动输入的URL，以便该应用程序不会重新加载？

Answer 1

在我的app.js构造函数中，我有console.log触发一条消息到说构造函数被调用了。最初我看到该消息触发第一次进入应用程序时，然后如果我使用链接导航在页面之间，我看不到任何后续消息

这是react应用的一般行为。第一次调用链接时，app.js进入树并被渲染。在渲染所有生命周期方法（包括构造函数）时，将以固定顺序触发，因此您可以看到日志，但是当您更改链接时，将卸载与内部路由相对应的组件，并呈现与新路由相关的组件，而不是完整的app.js。这就是为什么看不到日志的原因。

如何获得反应/反应路由器应用程序以接受手动输入网址与链接相同，以便应用程序不会重新加载？

之所以不能这样做，是因为当您在地址栏中明确输入URL时，浏览器不会将该URL与正在运行的Web应用程序相关联。它将始终从一开始就呈现您的Web应用程序。因此，从一开始就渲染它，您将始终获得该日志。

手动输入网址会刷新整个react应用

1 个答案: