Question

我遇到了一些奇怪的事情，我不确定为什么会这样。我正在使用来自React-Router-Dom的HashRouter，因为我试图将我的投资组合托管在Github Pages上。当我链接到新页面时，新页面完美加载，但是似乎将我带到了新页面的底部，而不是顶部。有谁知道为什么会这样？

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>

Answer 1

尝试：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

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

在HashRouter标记中：

    <HashRouter history={history}>

    </HashRouter>

这对我有用。

React-Router-Dom哈希路由器

1 个答案: