React Route without Refreshing the Page

Question

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.

Dvid Silva · Accepted Answer · 2019-03-11 20:20:44Z

10

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

answered Mar 11, 2019 at 20:20

Dvid Silva

1,17213 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Extelliqent Over a year ago

Well how can I make this Link component though?? It's "a" component so it causes page refresh...

<ListItem                   button                   className={classes.nested}                   component="Link"                   href="/Monthly"                 >                   <ListItemIcon>                     <DescriptionIcon />                   </ListItemIcon>                   <ListItemText                     inset                     className={classes.child}                     primary="Monthly"                   />                 </ListItem>

Extelliqent Over a year ago

Answer to my Link component questions is: Add this to the imports import { Link } from 'react-router-dom' and make sure ListItem has component={Link} and change your href to to="/page-address"

Collectives™ on Stack Overflow

React Route without Refreshing the Page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related