React Router 4-组件重新安装而不是重新渲染

Question

I'm setting up a React project that uses React Router 4 ("react-router-dom": "^4.3.1"). I have a SideBar and a NavBar and then the main part of the app (content), which changes depending on the route. The issue I'm seeing is, when I link to a new Component from a Component within the content, the Component renders as I would expect, calling only that Component's componentDidMount() . When the SideBar changes the route though, the entire App Component remounts, and its componentDidMount() gets called again.

The Root component creates the BrowserRouter

<BrowserRouter>
   <Switch>
     <Route path="/login" component={Login}/>
     <Route path="/register" component={Register}/>
     <Route component={App}/>
   </Switch>
</BrowserRouter>

The App then creates the SideBar, NavBar, and content within the route

 render() {
    return (
      <div>
        <NavBar user={this.state.user} market={this.state.market}/>
        <SideBar user={this.state.user} market={this.state.market}/>
        <Route path="/market" render={props => <Market user={this.state.user} market={this.state.market} {...props}/>} exact={true} />
        <Route path="/user" render={props => <User user={this.state.user} market={this.state.market} {...props}/>} exact={true} />
      </div>
    );
  }

When a button on the Market page is pressed, it triggers the following code, which immediately renders the User page (as I would expect).

<Link to={"/user"} className="btn>Link</Link>

When I link to this page from the SideBar though, with the following code, it causes App to remount, and calls componentDidMount() again.

<Link to="/user">

I'm trying to avoid having App's componentDidMount() ever getting called after the initial call, because I set it up to store the logged in user, and other init() type stuff. I would think the way I have it set up, this would happen, but apparently it isn't. How should I change my Router set up to do this?

Answer 1

It turns out it wasns't anything React related. I bought a theme, and the theme was capturing the mouse clicks and causing the page refresh. When I took off the theme's events, the routing worked properly.

Answer 2

You have to place the side-bar && navbar component inside root componenet browser router tag. So when a user logs in your app, the root component loads only once and side bar and navbar also once , so the other component you want to will be loaded using switch tag. Example.

<BrowserRouter>

            <div>
                <NavBar fetchChannelKey={this.fetchChannelKey} updateActive={this.updateActive} activePage={this.state.activePage} updateRoutes={this.handleUpdate}/>
                <SideBar updateActive={this.updateActive} activePage={this.state.activePage}/>
                <Switch>
                    <Route exact path="/" component={HomeIndex} />
                    <Route path="/home" component={HomeIndex} />
                    <Route path="/customer/:id" component={CustomerIndex} />
                    <Route path="/users/:id" component={UsersIndex} />
                    <switch/>
               <Browser/>
           <div/>