在 Private Routes 中 React Rendering 两次答案

【问题标题】：React Rendering twice in Private Routes在 Private Routes 中 React Rendering 两次
【发布时间】：2019-05-23 21:07:45
【问题描述】：

当我在渲染组件中运行 console.log 时，它在 chrome 开发检查器中出现了两次。这只发生在私有路由中。

我曾尝试在 Switch 中弄乱路由器，但没有任何效果

App.js**********

class App extends Component {
  render() {
    return (
      <div>
        <PrivateRoute path="/user" component={Layout} />
        <PrivateRoute path="/user/dashboard" component={DashboardPage} />
        <PrivateRoute path="/user/profile" component={ProfilePage} />
        <PrivateRoute path="/user/vehicles" component={VehiclesPage} />
        <PrivateRoute path="/user/routes" component={RoutesPage} />
        <PrivateRoute path="/user/sessions" component={SessionsPage} />

        <Switch>
          <Route exact path="/" component={RealmForm} /> //login page redirect to "/user/dashboard"
        </Switch>
      </div>
    );
  }
}

export default (App);

index.js *********

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

PrivateRoute.js**********

import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";



class PrivateRoute extends Component {
  state = {
    authenticated: false
  };

  render() {

    }

    const { component: Component, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props =>
          authenticated ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: "/",
                state: { from: this.props.location }
              }}
            />
          )
        }
      />
    );
  }
}

export default withKeycloak(PrivateRoute);

我只想对渲染组件中的任何内容进行一次控制台操作。我认为这与我设置路线的方式有关，但我不确定。

【问题讨论】：

你说console.log出现了两次，能不能说的更准确点，是针对特殊路由路径还是针对所有路由？
什么是私有路由？如果您需要这方面的帮助，您需要提供更多信息。我们甚至看不到您尝试控制台日志的内容。
@OlivierBoissé 私有路由用于身份验证，仅允许经过身份验证的用户访问这些报价，我将添加上面的代码。如果我从私有路由记录任何控制台，我会看到控制台出现两次
@davirk21，在应用程序首次启动时，您应该在 Private Route 中看到控制台 6 次，因为您尝试渲染组件 6 次。当您尝试导航到 Private Route 时，您不应该看到日志。但是，您可以在 PrivateRoute 组件中重构您的代码 .. constructor(props) { super(props); this.state = { 认证：假}; }
@davirk21，我看到你用高阶组件 keyCloak 包装 PrivateRoute，你真的需要吗？一个可能的原因可能是您的高阶组件可能正在重新渲染？

标签： reactjs react-redux

【解决方案1】：

请注意 PrivateRoute 组件的作用，但如果它在内部某处使用 Route，则应为 path="/user" 使用 exact 属性，该属性可以传递给 PrivateRoute 组件。

<PrivateRoute path="/user" exact component={ Layout } />

【讨论】：

私有路由用于身份验证，只允许经过身份验证的用户访问这些路由，我将添加上面的代码。如果我从私有路由记录任何控制台，我会看到控制台出现两次
不幸的是，将精确添加到私有路由并不能解决此问题。我仍然看到任何 console.log 被记录两次