React Router 4 - Component Remounting Instead of Re-Rendering

1
votes

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?

2
javascriptreactjsreact-router-v4react-router-dom

2 Answers

1
votes

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.

0
votes

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/>