execute route change from siblings component in React Router V4

Question

I am learning React.js. I am using React router version 4.3.1 and React router dom 4.3.1.

My current app structure is given below.

<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>

in my content component i have a Router set up as given below.

<BrowserRouter> 
  <React.Fragment> 
  <Route exact path="/phoenix/public" component={Login} /> 
  <ProtectedRoute exact path="/phoenix/public/sample" component={SamplePage} /> 
  <ProtectedRoute exact path="/phoenix/public/view_ticket" component={ViewTicket} /> 
  <ProtectedRoute exact path="/phoenix/public/create_ticket" component={CreateTicket} /> 
  <ProtectedRoute exact path="/phoenix/public/dashboard" component={Dashborad} /> 
  </React.Fragment> 
</BrowserRouter>

Here ProtectedRoute is a functional component which checks if the user is authenticated and returns a Route

My sidebar has some a tags like below.

<li> 
  <a href="dashboard"> 
  <i className="ti-panel" /> 
  <p>Dashboard</p> 
  </a> 
</li>

My goal is to navigate to different Routes without page refresh on click from side bar. But clicking href reloads the page and all my state in my Mobx refreshes. I have tried to Redirect but could not get the Router which is stated in siblings component (content is siblings of sidebar). I have no idea how to achieve this.

Have you tried using [Link](https://reacttraining.com/react-router/web/api/Link)? — c-chavez, Nov 15 '18 at 07:14
I have tried to use links but i guess it needs a Router but my sidebar component does not have a Router. How can i use link in sidebar component if my Router is set up in content ? — ahnafscm, Nov 15 '18 at 08:11

score 0 · Answer 1 · answered Nov 15 '18 at 14:31

As stated in the comments on your question, regular <a> tags will not work, and refresh the page. So you will need to use Link or NavLink.

If you want to make it work in your sidebar (child component) you will need to wrap the <BrowserRouter> around all the components where you want to use the routes.

For example like this (using your code):

<BrowserRouter>
<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>
</BrowserRouter>

And your Sidebar will be something like this:

<React.Fragment>
    <Link to="/dashboard">Dashboard</Link> 
    ...
</React.Fragment>

Then in your content component. You need to delete the <BrowserRouter>

i am successful in navigating to the desired route with your solution but the content does not change to according route — ahnafscm, Nov 15 '18 at 15:57
Do you have a switch around your routes? https://reacttraining.com/react-router/core/api/Switch — PreDinnerSnack, Nov 15 '18 at 16:12

score 0 · Answer 2 · answered Nov 15 '18 at 18:27

I fixed my problem by having BrowserRouter like below as suggested by @PreDinnerSnack.

<BrowserRouter>
<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>
</BrowserRouter>

Then i used Navlink in My Sidebar component. Which fixed the problem of navigating to the desired route without page refresh. But then i faced another problem as Content was not Refreshing according to the route.

For that problem I found the observer HOC of Mobx was interfering with my router. I had to wrap my content with withRouter as below to fix this problem.

withRouter(observer(Content));

I hope my solution will come in handy for someone as i found no tutorial with the examples of React Router implementation like mine on the web.

execute route change from siblings component in React Router V4

2 Answers2