react-router 4

Question

关于主题如何在处理程序中获取路径名称？例如：

var routes = <Route handler={App} path="/">
    <Route name="home" path="/home" handler={HomePage} />
    <DefaultRoute handler={HomePage} />
</Route>

Router.run(routes, function(Handler, state) {
  var params = state.params;
  React.render(<Handler params={params}/>, document.body);
});

现在假设我有一个这样的组件：

class HomePage extends React.Component {
    render() {
        return(<div>MyComponent</div>)
    }
}

如何获取当前路线名称？更具体一点，我想得到

name="home"

来自

的

属性

<Route name="home" path="/home" handler={HomePage} />

Answer 1

在react-router 0.13之前，你可以使用this.getRoutes() mixin Router.State使用。

对于react-router 0.13，您也可以使用它：

var currentRoutes = this.context.router.getCurrentRoutes();
var lastRoute = currentRoutes[currentRoutes.length - 1];
console.log(lastRoute.name);

对于react-router v2.0.x，您可以使用：

this.props.routes[this.props.routes.length-1]

Answer 2

react-router 4

v4已从代码库中删除了JS API，这意味着上述方法无法继续前进。

新方法是将道具直接传递给正在渲染的组件，就像通常使用React app中的任何其他组件一样。

Comment.objects.all() 
<QuerySet [<Comment: Some comment.>, <Comment:
Second comment.>]

要在示例应用中查看此内容，请查看react-lego

的react-router-4 branch

Answer 3

假设我们正在谈论相同的react-router（当前版本是2.8.x），您可以直接通过this.props.route.path访问该路由，该主页将为/home（在HomePage组件）。

链接到docs。

编辑：链接已更新。

如何使用react-route在处理程序中获取路由名称？

3 个答案:

react-router 4