web-dev-qa-db-fra.com

Changer l'URL dans react-router v4 sans utiliser Redirect ou Link

J'utilise react-router v4 et matériel-ui dans mon application React. Je me demandais comment changer l'URL une fois que vous avez cliqué sur un GridTile dans GridList .

Mon idée initiale était d'utiliser un gestionnaire pour onTouchTap. Cependant, la seule manière de rediriger les données consiste à utiliser les composants Redirect ou Link. Comment pourrais-je changer l'URL sans rendre ces deux composants?

J'ai essayé this.context.router.Push('/foo') mais cela ne semble pas fonctionner.

javascriptreact-routermaterial-uireact-router-v4
24
Alex

Essaye ça, 

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

warningfonctionne pour les versions antérieures à v4

et 

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

pour v4 et supérieur

39
Ayush Sharma

J'utilise ceci pour rediriger avec React Router v4 :

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

J'espère que ça marche pour vous;)

34
Jobsamuel

React Router v4

Il me fallait deux choses pour que tout se passe bien.

La page de documentation sur auth workflow contient pas mal de choses nécessaires.

Cependant, j'ai eu trois problèmes 

  1. D'où vient le props.history?
  2. Comment puis-je le transmettre à mon composant qui n'est pas directement à l'intérieur du composant Route
  3. Et si je veux d'autres props?

J'ai fini par utiliser:

  1. option 2 de une réponse sur 'Naviguer par programme à l’aide du routeur de réaction' - c’est-à-dire d’utiliser <Route render> qui vous donne props.history qui peut 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 - transmettre les accessoires au composant du gestionnaire'

N.B. Avec la méthode render, vous devez explicitement passer par les accessoires du composant Route. Vous souhaitez également utiliser render et non component pour des raisons de performances (component force un rechargement à 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’une des choses déroutantes que j’ai trouvée est que, dans bon nombre des documents de React Router v4, ils utilisent MyComponent = ({ match }) i.e. Object destructuring , ce qui signifiait au départ que j’ignorais que Route transmettait trois accessoires, match, location et history

Je pense que certaines des autres réponses ici supposent que tout est fait via des classes JavaScript. 

Voici un exemple. Plus si vous n'avez pas besoin de passer une props, vous pouvez simplement 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>
    }
}
3
icc97

C'est comme ça que j'ai fait la même chose. J'ai des vignettes qui sont des vignettes de vidéos YouTube. Lorsque je clique sur la vignette, elle me redirige vers une page "lecteur" qui utilise "id_vidéo" pour restituer la vidéo correcte à la page.

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

ETA: Désolé, vous avez juste remarqué que vous ne souhaitiez pas utiliser les composants LINK ou REDIRECT pour une raison quelconque. Peut-être que ma réponse aidera toujours d'une certaine manière. ; )

0
Barton Young