wake-up-neo.com

React Router v4 - Wie erhalte ich die aktuelle Route?

Ich möchte ein title in <AppBar /> anzeigen, das irgendwie von der aktuellen Route übergeben wurde.

Wie kann in React Router v4 <AppBar /> die aktuelle Route in das title Prop übertragen werden?

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

Gibt es eine Möglichkeit, einen benutzerdefinierten Titel von einem benutzerdefinierten prop auf <Route /> zu übergeben?

100

In React Router 4 befindet sich die aktuelle Route in - this.props.location.pathname. Hol einfach this.props und überprüfe. Wenn Sie location.pathname immer noch nicht sehen, sollten Sie den Dekorateur withRouter verwenden.

Das könnte ungefähr so ​​aussehen:

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}
149
Con Posidielov

Wenn Sie Reacts Vorlagen verwenden, sieht das Ende Ihrer React-Datei folgendermaßen aus: export default SomeComponent Sie müssen die Komponente höherer Ordnung (oft als "HOC" bezeichnet) withRouter verwenden.

Zunächst müssen Sie withRouter wie folgt importieren:

import {withRouter} from 'react-router-dom';

Als Nächstes möchten Sie withRouter verwenden. Sie können dies tun, indem Sie den Export Ihrer Komponente ändern. Möglicherweise möchten Sie von export default ComponentName zu export default withRouter(ComponentName) wechseln.

Dann können Sie die Route (und andere Informationen) von Requisiten erhalten. Insbesondere location, match und history. Der Code zum Ausspucken des Pfadnamens wäre:

console.log(this.props.location.pathname);

Eine gute Zusammenfassung mit zusätzlichen Informationen finden Sie hier: https://reacttraining.com/react-router/core/guides/philosophy

44
lowcrawler

Ich denke, der Autor von React Router (v4) hat das gerade mit Router HOC hinzugefügt, um bestimmte Benutzer zu beruhigen. Ich glaube jedoch, dass der bessere Ansatz darin besteht, nur Render-Requisiten zu verwenden und eine einfache PropsRoute-Komponente zu erstellen, die diese Requisiten übergibt. Dies ist einfacher zu testen, da Sie die Komponente nicht wie bei Router "verbinden". Habe eine Menge verschachtelter Komponenten in Router gepackt und es wird keinen Spaß machen. Ein weiterer Vorteil ist, dass Sie diesen Pass auch über beliebige Requisiten zur Route nutzen können. Hier ist das einfache Beispiel für die Verwendung von Render-Requisiten. (so ziemlich das genaue Beispiel von ihrer Website https://reacttraining.com/react-router/web/api/Route/render-func ) (src/components/routes/props-route)

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

verwendung: (Um die Routenparameter (match.params) zu erhalten, können Sie einfach diese Komponente verwenden und diese werden für Sie übergeben.)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

beachten Sie auch, dass Sie auf diese Weise auch alle zusätzlichen Requisiten übergeben können, die Sie möchten

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />
8
hal9000