Ändern der URL in react-router v4 ohne Verwendung von Redirect oder Link

Question

Ich verwende react-router v4 und material-ui in meiner React App. Ich habe mich gefragt, wie man die URL ändert, wenn man innerhalb GridList auf GridTile klickt.

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

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

Answer 1

die Sie interessieren,

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

Warnung Werke für frühere Versionen

Answer 2

in v4 ich dies mit mit umleiten Reagieren Router v4:

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

Hoffe es funktioniert für Sie;)

Answer 3

Reagieren Router v4

Es gibt ein paar Dinge, die ich diese Arbeit reibungslos zu bekommen benötigt.

Die Doc-Seite auf hat ziemlich viel, was erforderlich ist.

Allerdings hatte ich drei Fragen

1. Woher kommt der props.history kommen aus?
2. Wie gebe ich es durch meine Komponente, die innerhalb der Route Komponente nicht direkt ist
3. Was passiert, wenn ich andere props will?

ich landete mit:

1. Option 2 von an answer on 'Programmatically navigate using react router' - das heißt <Route render> verwenden, die Sie props.history bekommt, die an die Kinder können dann weitergegeben.
2. Verwenden Sie die render={routeProps => <MyComponent {...props} {routeProps} />} kombinieren andere props von this answer on 'react-router - pass props to handler component'

N. B. Mit der render Methode müssen Sie die Props von der Route Komponente explizit durchlaufen. Sie möchten auch render und nicht component aus Leistungsgründen verwenden (component erzwingt ein erneutes Laden jedes Mal).

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

Einer der verwirrenden Dinge fand ich, dass sie in nicht wenigen der React Router v4 docs verwenden MyComponent = ({ match }) dObject destructuring, die ich war nicht klar, ursprünglich gemeint, dass Route drei Stützen geht nach unten, match, location und history

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

Hier ist ein Beispiel, und wenn Sie props durch Sie nicht nur verwenden können, übergeben müssen component

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

Answer 4

Dies ist, wie ich eine ähnliche Sache tat. Ich habe Kacheln, die Thumbnails zu YouTube-Videos sind. Wenn ich auf die Kachel klicke, werde ich auf eine Player-Seite weitergeleitet, auf der die Video-ID verwendet wird, um das richtige Video auf die Seite zu rendern.

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

ETA: Sorry, habe gerade bemerkt, dass Sie die LINK oder Umleiten von Komponenten aus irgendeinem Grund verwenden wollte. Vielleicht hilft meine Antwort noch irgendwie. ;)