如何使用反应路线在处理程序中获取路线名称？

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() 使用 Router.State mixin。

对于 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（当前版本是 2.8.x），您可以直接通过 this.props.route.path 访问路由，这将是 /home用于您的主页（在 HomePage 组件中）。

Link 到 docs。

编辑：link 已更新。

Answer 3

反应路由器 4

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

新方法实际上是将 props 直接传递给正在渲染的组件，就像您通常在 React 应用程序中处理任何其他组件一样。

import React from 'react';
import { Match, Link, Miss } from 'react-router';
import DocumentMeta from 'react-document-meta';

import MainLayout from './Layouts/MainLayout';
import Homepage from './containers/Homepage/Homepage';
import Game from './containers/Game/Game';
import NotFound from './containers/NotFound/NotFound';

export const routes = {
  homepage: {
    exactly: true,
    pattern: '/',
    label: 'About React Lego',
    component: Homepage
  },
  game: {
    pattern: '/game',
    label: 'Star Wars Trivia',
    component: Game
  }
};

const passPropsToRoute = ({ route, props }) => (
  <span>
    <DocumentMeta title={ route.title } />
    <route.component {...props} routes={route.routes}/>
  </span>
);

const matchWithSubRoutes = (key, i) => {
  const route = routes[key];
  return (<Match { ...route } key={ i } render={(props) => passPropsToRoute({ route, props })} />);
};

export function makeRoutes() {
  return (
    <MainLayout>
      {Object.keys(routes).map(matchWithSubRoutes)}
      <Miss title={`${siteTitle} - Page Not Found`} component={ NotFound } />
    </MainLayout>
  );
}

要在示例应用中查看此功能，请查看 react-lego which has a react-router-4 branch

如何使用反应路线在处理程序中获取路线名称？

How to get route name in handler using react-route?

reactjs

react-router

反应路由器 4