Question

我使用App组件来保存所有路线，使其看起来像

class App extends React.Component {
  state = { signedIn: false };
  handleSignedIn = () => {
    this.setState({ signedIn: true });
  };
  render() {
    <Router>
      <Route>Header</Route>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/login" component={Login}/>
        {...otherRoutes}
      </Switch>
      <Route>Footer</Route>
    </Router>;
  }
}

然后在其中一条路线中，我有类似的东西

<NavLink to="/">
  Home
</NavLink>

但是，我发现点击此NavLink会重新呈现App并将signedIn设置为false，这是正确/更好的方式来浏览此内容。

- 更新路线了解更多详情

基本上我希望<App>本身不要重新渲染，但<Router>应该。

Answer 1

返回App.js意味着signedIn重置为false，因为默认状态为false。刷新页面也会重新呈现App.js并将其重置为false。

您需要某种方法来检查用户是否已登录。一种方法是在登录后存储令牌客户端，并在组件加载时检查令牌是否存在。

您可以将令牌存储在localStorage中，然后每当App.js挂载时执行类似componentDidMount - ＆gt;的操作。 checkToken（） - ＆gt; setState（{signedIn：true}）

如何使用反应路线不重新渲染整个应用程序？

1 个答案: