2016-04-09 6 views
3

I RouteKann tun isActive nicht überprüfen

<Route path="/catalog/:category" component={CatalogList} /> 

haben, wenn ich auf Seite/Katalog bin/10, zum Beispiel, ich versuche aktiv

this.context.router.isActive('/catalog/:category') 

Aber ich diese Route zu überprüfen wurde immer falsch. Wie überprüfe ich das?

Beispiel:

const Test = React.createClass({ 
    contextTypes: { 
     router: React.PropTypes.object.isRequired 
    }, 

    render() { 
     console.log(this.props.location.pathname); // /catalog/12 
     console.log(this.context.router.isActive('/catalog/:category')); // false (need true) 
     console.log(this.context.router.isActive('/catalog/12')); //true 
     return <Link to="/catalog/12">Lets test</Link>; 
    } 
}); 

render((
    <div> 
     <Router history={browserHistory}> 
      <Route path="/catalog/:category" component={Test} /> 
      <Route path="/" component={Test} /> 
     </Router> 
    </div> 
), document.getElementById('app')); 

Antwort

7

angegeben Als in the docs

Eine Route nur als aktiv betrachtet, wenn alle URL-Parameter übereinstimmen, einschließlich optionaler Parameter und deren Anwesenheit oder Abwesenheit.

Das bedeutet URL-Parameter müssen übereinstimmen. Deshalb ist in Ihrem Beispiel:

this.context.router.isActive('/catalog/:category'); // false 
this.context.router.isActive('/catalog/12');  // true 

Sie einen regulären Ausdruck verwenden könnte auf location.pathname

this.props.location.pathname.match(/^\/catalog\/\d+\/?$/);