Question

我正在构建一个React应用并使用React Router4。导航栏由左侧的链接和右侧的几个按钮组成（我们称其为正确的工具）。

导航栏是布局的一部分。现在，这些按钮在不同页面上有所不同。例如，我有3页的信息中心，历史记录和管理员。在仪表板上有一个“筛选器”按钮，“历史记录”将具有“筛选器”，“下载”。管理员将没有任何按钮。

在角度上，它们是$ state.current，但是在React路由器中找不到任何类似的东西。

匹配url字符串很麻烦。有谁对此有更好的解决方案？

Answer 1

有点解释，但我认为这不是很清楚。如果您使用的是功能组件，那真的很容易。

导入路由器时，请包含“ useLocation”。

import { Link, useLocation } from 'react-router-dom';

，然后在组件的开头实例化它。

let location = useLocation();

然后，每当需要使用它时，只需调用它即可。

console.log(location.pathname);

容易！

Answer 2

使用react-router时，只需从道具中读取location.pathname，就可以确定当前所处的路径。

如果您尝试访问location.pathname的组件未直接连接到Route或没有收到Router道具，则可以将{包裹起来{1}} HOC可以访问路由器道具。

此外，路由器还有一个名为withRouter的道具，它可以为您在

中使用该组件的组件提供最匹配的路由信息。

例如，在路由配置中

match

Home.jsx

<Route path="/" component={Home} />

因此，在上述情况下，如果您访问以下网址：render() { console.log(this.props.match.path); return ( <div> <Route path="/user" component={User}/> </div> ) }，并且如果您登录/user，则会导致this.props.match.url，这不是您可能想要的结果在寻找。

一种解决方法是使用/提供的matchPath方法

它的典型用法是

react-router

Answer 3

对我有用的一种简单方法是在这里this.props.match 为了进行探索，您可以在当前组件中对其进行控制台，它将为您提供所有详细信息。

  render() {
        console.warn("url details", this.props.match.params.id)
        return (

请记住，您必须在当前的主组件中对其进行控制台以获取完整路径。如果您尝试使用支持性组件，例如NAV或面包屑。它可能无法正常工作。并告诉我您是否仍然有问题。

用react-router 4识别我当前在哪个路由的更好方法是什么

3 个答案: