React路由器v4-如何获取当前路由？

Question

我想在

在React路由器v4中，

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

有没有办法从on上的自定义prop传递自定义标题




Answer 1

如果你使用的是反应的模板，你的反应文件的结尾看起来像这样：导出默认的一些组件，你需要使用高阶组件（通常称为HOC），with路由器。

首先，你需要导入with路由器如下所示：

import {withRouter} from 'react-router-dom';

接下来，您将要使用路由器的。可以通过更改组件的导出来完成此操作。您可能希望从export default ComponentName更改为export default with router（ComponentName）。

然后你可以从道具上获得路线（和其他信息）。具体来说，位置，匹配，以及历史。吐出路径名的代码是：

console.log(this.props.location.pathname);

此处提供了一份包含其他信息的良好书面文件：https://reacttraining.com/react-router/core/guides/philosophy

Answer 2

在响应路由器4中，当前路由在-this.props.location.pathname。只需获取this.props并验证。如果您仍然没有看到location.pathname，那么您应该将装饰器与路由器一起使用。

这可能看起来像这样：

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

Answer 3

在react-router的5.1版本中，有一个名为usePlace的钩子，它返回当前位置对象。这在您需要知道当前URL的任何时候都可能有用。

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

function HeaderView() {
  const location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}