Jak uzyskać nazwę trasy w programie obsługi za pomocą opcji route-route?

Question

Co do tematu, w jaki sposób mogę uzyskać nazwę trasy w programie obsługi? Na przykład:

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); 
}); 

Załóżmy teraz mam komponent takiego:

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

Jak mogę uzyskać aktualną nazwę trasy? Aby być bardziej konkretny chcę uzyskać atrybut

name="home" 

z

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

Answer 1

Przed reagują-routera 0,13 można użyć this.getRoutes() użyciu Router.State wstawek.

Dla reagować-routera 0,13 można użyć tego też:

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

Dla reagować-Router v2.0.x można użyć:

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

Answer 2

Zakładając, że mówimy o tym samym reagują -router (i obecna wersja to 2.8.x) możesz uzyskać dostęp do trasy bezpośrednio przez this.props.route.path, która będzie /home dla twojej strony głównej (w komponencie HomePage).

Link do docs.

Edytuj: link zaktualizowany.

Answer 3

reagują routera, 4

V4 usunięto API JS na podstawie kodu co oznacza, że ​​powyższe sposoby nie działają do przodu.

Nowy sposób polega na przekazywaniu rekwizytów bezpośrednio do renderowanego komponentu, tak jak zwykle w przypadku dowolnego innego komponentu w aplikacji Reaguj.

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> 
); 
} 

Aby zobaczyć ten pracuje w przykładzie aplikacji przyjrzeć react-lego który ma react-router-4 branch