reactjs 如何访问React路由器中的历史堆栈?

xggvc2p6  于 2023-01-08  发布在  React
关注(0)|答案(3)|浏览(807)

我正在尝试访问React路由器的历史堆栈。
下面是我想做的:
我使用react.js和react-router创建了一个讨论板。
如果用户单击图板上的某个列表,则会转到详细信息页面。
假设用户点击列表中id为3的文章,react-router会转到id为3的文章的详细页面,URL表单将在下面。

localhost:3000/board/3

在详细信息页面中,有转到列表按钮,当用户单击它时,页面将再次移动到列表页面,我将在这里使用history. back()
到目前为止,使用react-router很容易实现。
然而,还有另一个页面,用户可以访问详细信息页面,让我们说配置文件页面。
如果用户通过配置文件页面访问详细信息页面,转到列表按钮的行为应该不同。它将用户推到用户列表页面。
综上所述,转到列表按钮的工作原理如下:

board -> detail -> click go to the list -> board
profile -> detail -> click go to the list -> user-list

为了根据用户所在的位置将用户推到不同的页面,我需要查看用户来自哪里,因此我需要查看历史堆栈,或者有没有其他方法可以检查用户来自哪个URL?

iklwldmw

iklwldmw1#

使用react-router-dom,您将无法直接访问浏览器的历史对象(即历史堆栈),但您不一定需要这样做,因为您可以使用路由状态来发送“ meta”数据沿着关于用户从何处导航的路由转换。
Link to: object
对于示例路由:<Route path="/detail">....</Route>您可以有多个指向页面的链接,每个链接提供唯一的状态。
示例链接:

<Link
  to={{
    pathname: '/details',
    state: {
      from: 'board',
    }
  }}
>
  to details from board
</Link>

<Link
  to={{
    pathname: '/details',
    state: {
      from: 'profile',
    }
  }}
>
  to details from profile
</Link>

或用于命令式导航

history.push({
  pathname: '/details',
  state: {
    from: 'profile',
  }
});

路由状态放置在location对象上,访问Details组件中的路由状态,并相应地发出后续导航。

const targets = {
  board: "/board",
  profile: "/userlist",
};

...

const { state: { from } } = useLocation();
const target = targets[from] ?? "/board";

...

<Link to={target}>
  click go to the list
</Link>

或用于命令式导航

history.push(target)
6qfn3psc

6qfn3psc2#

历史/ useHistory在React路由器v6中不再可用。您可以使用useNavigate和位置状态属性来确定从何处导航到当前位置。如here中所述。
告诉下一个页面用户来自哪里,并对用户界面进行分支。这里最流行的实现是,如果用户在网格视图中点击了某个项目,则以模态显示记录,但如果用户直接显示到URL,则以其自己的布局显示记录(pinterest,旧的instagram)。
您可以通过两种方式设置位置状态:在链接组件上或导航:

<Link to="/pins/123" state={{ fromDashboard: true }} />;

let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

在下一页中,您可以使用useLocation访问它:

let location = useLocation();
location.state;

浏览器后退操作可以使用执行

let navigate = useNavigate();
...
navigate(-1)
6l7fqoea

6l7fqoea3#

在我们的导航中,我们传递历史记录(代码块1)。在基于函数的组件中,我们将拥有完整的历史记录堆栈(代码块2)。请参考URL了解更多详细信息。
网址:https://v5.reactrouter.com/web/api/history

代码块1

<Navbar.Collapse id='basic-navbar-nav'>
    <Route render={({ history }) => <SearchBox history={history} />} />
    <Nav className='ml-auto'>
        <LinkContainer to='/cart'>
            <Nav.Link>
                <i className='fas fa-shopping-cart'></i> Cart
            </Nav.Link>
        </LinkContainer>
    </Nav>
</Navbar.Collapse>

代码块2

const SearchBox = ({ history }) => {
    const [keyword, setKeyword] = useState('')
  
    const submitHandler = (e) => {
      e.preventDefault()
      if (keyword.trim()) {
        history.push(`/search/${keyword}`)
      } else {
        history.push('/')
      }
    }
};

相关问题