Question

当我在渲染组件中运行console.log时，它在chrome dev检查器中出现了两次。这仅发生在私人路线中。

我尝试在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")
);

我只想控制台一次渲染组件中的任何事情。我认为这与我设置路线的方式有关，但我不确定。

Answer 1

请确保确定PrivateRoute组件的功能，但是如果该组件在内部某处使用Route，则应为路径=“ / user”使用exact属性，该属性可以传递给PrivateRoute组件。

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

在专用路线中两次进行React渲染

1 个答案: