Zmiana adresu URL w routerze reagowania v4 bez użycia przekierowania lub linku

Question

Używam react-router v4 i material-ui w mojej aplikacji React. Zastanawiam się, jak zmienić adres URL po kliknięciu na GridTile w obrębie GridList.

Mój początkowy pomysł polegał na użyciu handler'a dla onTouchTap. Jednak jedynym sposobem przekierowania jest użycie komponentów Redirect lub Link. Jak mogę zmienić adres URL bez renderowania tych dwóch składników?

Próbowałem już this.context.router.push('/foo'), ale wydaje się nie działać.

Answer 1

Spróbuj tego,

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

ostrzeżenie utwory w wersjach poprzedzających V4

Answer 2

Używam tego przekierować z React routera v4:

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

Mam nadzieję, że to zadziała dla ciebie;)

Answer 3

React Router v4

Jest kilka rzeczy, które mi potrzebne, aby dostać tę pracę bez zakłóceń.

Strona doc na auth workflow ma dość dużo tego, co jest wymagane.

Jednak miałem trzy kwestie

1. Skąd props.history pochodzi?
2. Jak przekazać to do mojego komponentu, który nie jest bezpośrednio wewnątrz komponentu Route
3. Co jeśli chcę inny props?

skończyło się przy użyciu:

1. opcję 2 z an answer on 'Programmatically navigate using react router' - czyli użycie <Route render> który dostaje props.history które następnie mogą być przekazywane do dzieci.
2. Użyj render={routeProps => <MyComponent {...props} {routeProps} />} połączyć z inną propsthis answer on 'react-router - pass props to handler component'

nb Metodą render trzeba jawnie przejść przez rekwizyty ze składnika Route. Również z powodów wydajnościowych chcesz używać render, a nie component (wymuszenie ponownego załadowania za każdym razem).

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

Jedną z dziwnych rzeczy znalazłem jest to, że sporo z React docs Router v4 używają MyComponent = ({ match }) tjObject destructuring, co oznaczało, że początkowo nie zdawałem sobie sprawy, że Route przechodzi w dół trzy rekwizyty, match, location i history

myślę, że niektóre z pozostałych odpowiedzi tutaj zakładamy, że wszystko odbywa się za pośrednictwem klas JavaScript.

Oto przykład, plus, jeśli nie trzeba przechodzić przez dowolny props można po prostu użyć 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

ten sposób zrobiłem coś podobnego. Mam kafelki, które są miniaturkami filmów w YouTube. Po kliknięciu tego kafelka przekierowuję mnie na stronę "odtwarzacza", która używa "wideo_id", aby renderować odpowiedni film na stronę.

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

ETA: Przepraszamy, ale zauważyłem, że z jakiegoś powodu nie chcesz używać komponentów LINK lub REDIRECT. Może moja odpowiedź nadal pomoże w pewien sposób. ;)