Changer L'URL dans react-router v4 sans utiliser de redirection ou de lien [dupliquer]

j'utilise ceci pour rediriger avec Routeur React v4 :

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

Espérons que cela fonctionne pour vous ;)

Réagir Routeur v4

il y a deux ou trois choses dont j'avais besoin pour que ça marche.

La page de doc sur auth flux de travail a beaucoup de ce qui est nécessaire.

Cependant, j'ai eu trois questions de

1. d'Où vient le props.history ?
2. Comment puis-je passer il jusqu'à mon composant qui n'est pas directement à l'intérieur du Route composant
3. et si je veux un autre props ?

j'ai fini par utiliser:

1. l'option 2 de une réponse sur "par programmation naviguer à l'aide de réagir routeur' - c'est à dire à utiliser <Route render> qui vous permet de vous props.history qui peuvent ensuite être transmis aux enfants.
2. utilisez le render={routeProps => <MyComponent {...props} {routeProps} />} pour combiner les autres props de cette réponse sur 'react-router - pass props to handler component'

N.B. avec la méthode render vous devez passer par les accessoires de la composante Route explicitement. Vous voulez aussi utiliser render et non component pour des raisons de performance ( component force une recharge à chaque fois).

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

L'un des les choses déroutantes que j'ai trouvées est que dans un certain nombre de la réaction Router v4 docs ils utilisent MyComponent = ({ match }) c.-à-d. la destruction D'objet , ce qui signifie au départ que je n'ai pas réalisé que Route passe en bas de trois props, match , location et history

je pense que certaines des autres réponses ici sont en supposant que tout est fait via des classes JavaScript.

voici un exemple, plus si vous n'avez pas besoin de passer n'importe quel props par vous pouvez juste utiliser 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>
    }
}

C'est comme ça que j'ai fait une chose similaire. J'ai des tuiles qui sont des vignettes de vidéos YouTube. Quand je clique sur la tuile, elle me redirige vers une page 'player' qui utilise le 'video_id' pour afficher la vidéo correcte sur la page.

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

ETA: Désolé, juste remarqué que vous ne vouliez pas utiliser le lien ou rediriger les composants pour une raison quelconque. Peut-être que ma réponse sera toujours aider d'une certaine manière. ;)