React 路由器和浏览器历史记录

Question

我完全迷失了，想寻求有关如何在我的应用中实现浏览器历史记录的建议。

使用路由器，我只有一个组件，它会根据我所在的页面分配页面。应用程序内的页面和文本是从 api 获取的，每当我单击按钮时，都会再次调用 api。

<Router>
<Switch>
<Route to="/" component={Body} />
...

这可能甚至无法正常工作，因为链接标签位于按钮上，它们指向 /page/number:

const renderPageNumbers = apiPagingSliced.map((links, index)  => {
        return <Link key={index} to={`/page/${links.label}`}>
                <button key={index} id={links.label} 
                onClick={props.handleClick} 
                className={(links.active ? "mark-page" : "") + " " + (links.url === null ? "remove-btn" : "")}
                >{links.label}
                </button></Link>
    }
    )

我已经设法让它工作，例如我得到“www.webpage.com/page/3”。但是当我在浏览器中按回时，它只会将 url 更改为上一页，不会做任何其他事情。如何实现功能性的后退/前进历史功能？

Answer 1

首先你应该添加路由参数示例：“/:id”

<Route to="/some_page/:id" component={SomePage} />

然后从 react-router 导入 useHistory 和 UseParams ：

import { useHistory, useParams } from "react-router-dom";

let { id } = useParams();

let history = useHistory();


<button  onClick={() => history.push(`/some_page/${id}`)}> Go to page </button>

Answer 2

首先你应该添加一个路由到/page/(some number)

这是这样完成的：

<Router>
<Switch>
<Route to="/" component={Body} />
<Route to="/page/:id" component={Page} />
...

现在在 Page 组件中导入一个名为 useParams 的反应路由器 dom 钩子

import { useHistory } from 'react-router-dom'

const Page = () => {

  const history = useHistory()

  //pageID will be equal to the page number

  return (
    <div>
      <button onClick={event => history.goBack`}>Go back!</button>
    </div>
  )
}