web-dev-qa-db-de.com

Ändern der URL in dem reakter Router v4 ohne Verwendung von Umleitung oder Link

Ich verwende Reakt-Router v4 und material-ui in meiner React-App. Ich habe mich gefragt, wie man die URL ändert, sobald ein Klick auf eine GridTile in GridList erfolgt.

Meine ursprüngliche Idee war, einen Handler für onTouchTap zu verwenden. Die einzige Möglichkeit für eine Umleitung besteht jedoch darin, die Komponenten Redirect oder Link zu verwenden. Wie kann ich die URL ändern, ohne diese beiden Komponenten zu rendern?

Ich habe this.context.router.Push('/foo') versucht, aber es scheint nicht zu funktionieren.

javascriptreact-routermaterial-uireact-router-v4
24
Alex

Versuche dies, 

this.props.router.Push('/foo')

warningfunktioniert für Versionen vor v4

und 

this.props.history.Push('/foo')

für v4 und höher

39
Ayush Sharma

Ich verwende dies, um mit React Router v4 umzuleiten:

this.props.history.Push('/foo');

Hoffe es funktioniert für dich;)

34
Jobsamuel

Reagiere auf Router v4

Es gibt ein paar Dinge, die ich brauchte, damit das reibungslos funktioniert.

Die Dokumentseite zu auth workflow hat eine Menge zu bieten.

Ich hatte jedoch drei Probleme

  1. Woher kommt der props.history?
  2. Wie gebe ich es an meine Komponente weiter, die nicht direkt in der Route -Komponente enthalten ist?
  3. Was ist, wenn ich andere props möchte?

Ich habe folgendes benutzt:

  1. option 2 von eine Antwort auf 'Programmgesteuertes Navigieren mit dem React Router' - dh Verwenden von <Route render> , mit dem Sie props.history die dann an die Kinder weitergegeben werden können.
  2. Verwenden Sie den render={routeProps => <MyComponent {...props} {routeProps} />}, Um andere props aus diese Antwort auf 'Reagieren-Router - Requisiten an Handlerkomponente übergeben' zu kombinieren

N.B. Bei der Methode render müssen Sie die Requisiten der Komponente Route explizit durchlaufen. Sie möchten auch render und nicht component aus Leistungsgründen verwenden (component erzwingt jedes Mal ein Neuladen).

const App = (props) => (
    <Route 
        path="/home" 
        render={routeProps => <MyComponent {...props} {...routeProps}>}
    />
)

const MyComponent = (props) => (
    /**
     * @link https://reacttraining.com/react-router/web/example/auth-workflow
     * N.B. I use `props.history` instead of `history`
     */
    <button onClick={() => {
        fakeAuth.signout(() => props.history.Push('/foo'))
    }}>Sign out</button>
)

Eines der verwirrenden Dinge, die ich gefunden habe, ist, dass in einigen der React Router v4-Dokumente MyComponent = ({ match }) ie Object destructuring , was bedeutete, dass ich anfangs nicht wusste, dass Route drei Requisiten, match, location und history weitergibt

Ich denke, einige der anderen Antworten hier gehen davon aus, dass alles über JavaScript-Klassen erfolgt.

Hier ist ein Beispiel. Wenn Sie kein props übergeben müssen, können Sie einfach component verwenden.

class App extends React.Component {
    render () {
        <Route 
            path="/home" 
            component={MyComponent}
        />
    }
}

class MyComponent extends React.Component {
    render () {
        /**
         * @link https://reacttraining.com/react-router/web/example/auth-workflow
         * N.B. I use `props.history` instead of `history`
         */
        <button onClick={() => {
            this.fakeAuth.signout(() => this.props.history.Push('/foo'))
        }}>Sign out</button>
    }
}
3
icc97

So habe ich eine ähnliche Sache gemacht. Ich habe Kacheln, die Miniaturansichten von YouTube-Videos sind. Wenn ich auf die Kachel klicke, wird ich auf eine "Player" -Seite umgeleitet, die die "video_id" verwendet, um das korrekte Video auf der Seite anzuzeigen.

<GridTile
  key={video_id}
  title={video_title}
  containerElement={<Link to={`/player/${video_id}`}/>}
 >

ETA: Sorry, ich habe gerade bemerkt, dass Sie die LINK- oder REDIRECT-Komponenten aus irgendeinem Grund nicht verwenden wollten. Vielleicht hilft meine Antwort trotzdem irgendwie. ; )

0
Barton Young