CODEWITHSUNDEEP
javascriptreactjsreact-router
Adam Lagevik
Adam Lagevik

Reputation: 683

React how to have component that is not affected by react router

Currently I have a react-router that renders views like so

render((
     <BrowserRouter onUpdate={() => window.scrollTo(0, 0)}>
        <Switch>
            <Route path="/Home" component={MainView} ignoreScrollBehavior/>
            <Route path="/Graphs" component={NotMainView} ignoreScrollBehavior/>
            <Route path="/" component={MainView} ignoreScrollBehavior/>
        </Switch>
     </BrowserRouter>
     ),
     document.getElementById('container')
);

But inside my components "MainView" and "NotMainView" i have the same component called "SideNavigation" like so

"MainView"

render () {
    return (
        <div>
            <SideNavigation store={store}/>
            <DemoComponent store={store}/>
        </div>

        ); 
    }
}

"NotMainView"

render () {
    return (
        <div>
            <SideNavigation store={store}/>
            <h1>Graph router working</h1>
        </div>

        ); 
    }
}

This causes the "SideNavigation" component to rerender when it should not. How can i break out the "SideNavigation" component so that the router only affects everything but the SideNavigation? To add what i want to do is to have a component that I call "SideNavigation", which is my menu, always visible and the routing should only rerender the rest of the page but not itself.

Upvotes: 0

Views: 174

Answers (2)

Yossi
Yossi

Reputation: 6027

Put it outside. Here is an example from my code:

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Route path="/" component={Navigation} />
        <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>

    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

Upvotes: 0

Kox
Kox

Reputation: 853

I would advise you to create one parent component that contains your SideNavigation component as well as the rest of your app, something like this:

//ParentComponent
render() {
    return (
       <div>
          <SideNavigation>
          <ViewsComponent>
       </div>
    );
}

And let your ViewsComponent deal with switching between Main and NotMain views:

//ViewsComponent
render() {
    return (
       <Switch>
        <Route path="/Home" component={MainView} ignoreScrollBehavior/>
        <Route path="/Graphs" component={NotMainView} ignoreScrollBehavior/>
        <Route path="/" component={MainView} ignoreScrollBehavior/>
       </Switch>
    );
}

Of course, now MainView and NotMainView components don't contain your SideNavigation.

Upvotes: 3

Related Questions