Question

我在导航时有反应，并希望通过点击重定向到列表页面。现在使用此页面加载页面

这是我的Header.js文件

Window

这是我的App.js文件我导入了这个

return (
<Link to="/allusers">All Users</Link>
);

Answer 1

您可以选中react-router或@reach/router

例如，在@ reach / router中，您可以使用提供的Link组件来创建与示例相同的锚点：

<Link to="/userlist">All Users</Link>

并使用所有路由创建路由器：

<Router primary={false}>
    <Home path="/" />
    <AllUsers path="/allusers" />
    <NotFound default />
</Router>

https://github.com/reach/router

您可以使用以下示例：https://reach.tech/router/tutorial/04-router

可以用react-router完成同样的事情。

Answer 2

这是通过客户端路由实现的：通过客户端操作浏览器的历史对象

这是为特定路线呈现特定组件的示例

import { BrowserRouter, Route, Link, Switch } from "react-router-dom"

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route exact path="/allusers" component={AllUsers} />
    <Route component={NotFoundPage} />
  </Switch>
</BrowserRouter>

// then just pair it up with a navigation bar

<Link to="/">All Users</Link>
<Link to="/allusers">All Users</Link>

与路线绑定的这些组件可以访问历史对象作为道具，在其他情况下，您可以调用history.push('/allusers')

参考： https://reacttraining.com/react-router/web/guides/quick-start

Answer 3

您可以执行以下操作：

goToUserList = () => {
    this.props.history.push('/userlist')
}

...
return(
    <button onClick={this.goToUserList}>Go User List</button>
)

希望有帮助。

如何在页面上导航而不重新加载页面

3 个答案: