Реагируйте на рендеринг дважды в частных маршрутах

Question

Когда я запускаю console.log в моем компоненте рендеринга, он дважды появляется в инспекторе chrome dev.Это происходит только на частных маршрутах.

Я пробовал возиться с роутером в коммутаторе, но ничего не работает

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);

Я просто хочу утешить что-нибудь в компоненте рендеринга один раз.Я думаю, это связано с тем, как я настраивал маршруты, но я не уверен.

Answer 1

Обратите внимание, что делает компонент PrivateRoute, но если он использует Route где-то внутри, вы должны использовать точное свойство для path = "/ user", которое можно передать компоненту PrivateRoute.

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