React router issue

JavaScript
1

Hello,
I am making a site in React and when I click on a link, it goes to the right page that I coded but that page is scrolled on various places, it’s not on the top. Does anyone know how to fix this?

2

Are you using react-router-dom? Well, I don’t understand what do you mean “scrolled on various places”

DId you use?

<Router exact path="/" component={myComponent}/>
1 Like
3

<Route path="/shop" exact component={Shop} />

I meant that when I go to a certain page, it is already scrolled up to a some point (end of the page actually), it’s doesn’t show the top of the page first but some point on it

4

Well, there could be a possibility on your code.
Can you show us the code? No one can help you if you don’t give the code for us to read.

5

Main component:

function App() {
  return (
    <div>
      <Router>
        <DataProvider>
          <Header />
          <Switch>
            <Route path="/" exact component={Main} />
            <Route path="/product/:id" exact component={SingleItem} />
            <Route path="/shop" exact component={Shop} />
          </Switch>
          <Footer />
        </DataProvider>
      </Router>
    </div>
  );
}

Shop component:

function Shop() {

  return (

    <div className="main">

      <DataProvider>

        <Item />

      </DataProvider>

    </div>

  );

}
6

Well, you only have one HTML page. So when you load more content in, you’re not going anywhere, it’s never a new HTML page, so you’re never going to get the default behaviour you get from a website with different HTML pages.

There are multiple solutions to this, one is in the documentation here: React Router: Declarative Routing for React.js

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.