reactjs - 手动输入一个 url 刷新整个反应应用程序

Question

我正在开发一个使用 React 路由器的简单 React 应用程序。我的应用程序从 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，以便应用程序不会重新加载？

标签： reactjsreact-routerreact-router-v4

Answer 1

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

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

如何让 react/react-router 应用程序接受与链接相同的手动输入的 url，以便应用程序不会重新加载？

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