Question

有人设法找到一种好方法，如何以编程方式导航到使用react-router的相对链接？

我已将react-router-relative-links用于声明性链接，但我找不到以编程方式执行此操作的好方法。

我知道可以使用resolve-pathname和router.push(…)手动完成，但这需要访问location，这只能在路由处理程序组件上使用。我的组件位于树的深处，因此我想避免所有布线回到顶部。

window.location.pathname是获取该位置的正确方法，然后通过router.push使用withRouter吗？

目前我正在使用它作为效用函数：

import resolvePathname from 'resolve-pathname';

function getPathnameFromRelativeLocation(relativeLocation) {
  let {pathname} = window.location;
  let basePath = pathname.endsWith('/') ? pathname : pathname + '/';
  return resolvePathname(relativeLocation, basePath);
}

在React组件的事件处理程序中：

// Current path is `/books/123`
let path = getPathnameFromRelativeLocation('write-review');
this.props.router.push(path);
// Current path is `/books/123/write-review`

Answer 1

react-router 3.0现在在上下文中提供了location，所以现在很容易从那里获取它。

https://github.com/ReactTraining/react-router/issues/3325

Answer 2

如果您使用的是browserHistory 它只是

browserHistory.push('/yourRelativePath');

确保您拥有最新的react-router和

 import { browserHistory } from 'react-router';

与react-router的程序化相对链接

2 个答案: