CODEWITHSUNDEEP
reactjsreact-router
Extelliqent
Extelliqent

Reputation: 1856

React Route without Refreshing the Page

I have below structure for React

App.js 
-> 
    Skeleton.js 
    ->
        1) Sidebar.js
        2) Content.js
        -> 
            1) Page1.js
            2) Page2.js
            3) Page3.js

Routing is done inside App.js with below:

<BrowserRouter>
      <Fragment>
      <Route exact path="/" component={Skeleton} />  
      <Route path="/:type" component={Skeleton} />
    </Fragment>
  </BrowserRouter>

And I have sidebar items like this

<ListItem
  button
  className={classes.nested}
  component="a" href="/Equity-Runs"
>
  <ListItemIcon>
    <DescriptionIcon />
  </ListItemIcon>
  <ListItemText
    className={classes.child}
    inset
    primary="Page1"
  />
</ListItem>

Everything works as expected like, if you click Page1 in the Sidebar it loads Page1, if you click Page2 loads Page 2, etc...

Now, each time you click on a link inside Sidebar, page goes blank white then loads. I'd like to make it so when you click pages only Content.js reloads therefore, rest of the page does not go blank and get loaded. Each time you click on a Page from sidebar, only Content area would change.

I am guessing I would have to move Routing logic into Content file but then problem is I need to know which page the user is on within Sidebar and AppBarPanel files. I don't have Redux set up as of now and would like to not implement that for this question's sake.

Note: I really don't understand why would anyone give negative point to this question without saying what's wrong with it.

Upvotes: 1

Views: 7780

Answers (1)

Dvid Silva
Dvid Silva

Reputation: 1162

You have to use a LInk component and not an a if you want the browser router to manage your navigation, as shown here.

https://reacttraining.com/react-router/web/api/Link/to-string

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

Upvotes: 10

Related Questions