Odtnhj

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.

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