Блог

Главная - Вопросы по программированию - Реагировать-маршрутизатор-Dom хэш-маршрутизатор

Реагировать-маршрутизатор-Dom хэш-маршрутизатор

#reactjs #react-router-dom

#reactjs #реагировать-маршрутизатор-dom

Вопрос:

Я сталкиваюсь с чем-то странным, и я не уверен, почему это происходит. Я использую хэш-маршрутизатор из React-Router-Dom, потому что я пытаюсь разместить свое портфолио на страницах Github. Когда я ссылаюсь на новую страницу, новая страница загружается идеально, но, похоже, она приводит меня к нижней части новой страницы, а не к верхней. Кто-нибудь знает, почему это может происходить?

app.js:

   <HashRouter>
        <div>
        <Navigation />
        <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/About" component={About} />
        <Route path="/MyHumber" component={MyHumber} />
        <Route path="/Foragr" component={Foragr} />
        <Route path="/TheWatchlist" component={TheWatchlist} />
        </Switch>
        </div>
  </HashRouter>

Ссылка:

   <Col lg={6}>
    <h1 className="project-title">{this.state.title}</h1>
    <p>{this.state.description}</p>
      <Link to={this.state.path}>
        <Button>View Project</Button>
      </Link>
   </Col>

Комментарии:

1. Как я понимаю, проблема в том, что при загрузке новой страницы она мгновенно прокручивается до самого низа? Как выглядит URL в адресной строке после навигации? Есть ли элемент som в нижней части страницы, который каким-то образом улавливает фокус? Какие-либо формы автофокусировки или тому подобное?

2. он не прокручивается, но когда я нажимаю на ссылку, новая страница отображается, однако она автоматически отображается внизу страницы. например, URL показывает » localhost:3000/ #/MyHumber «. Нет форм или чего-либо еще.

3. Я понимаю. Если речь идет о сохранении положения прокрутки с предыдущей страницы, эта страница из документации может помочь: reacttraining.com/react-router/web/guides/scroll-restoration . В противном случае я не вижу, что не так в вставленном вами коде. Возможно, вы можете воссоздать проблему в изолированной среде кода?

Ответ №1:

Попробуйте:

 import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.listen(_ => {
  window.scrollTo(0, 0)  
});

в теге HashRouter:

     <HashRouter history={history}>

    </HashRouter>

У меня это сработало.