Изменение URL-адреса в ответ-маршрутизаторе v4 без использования перенаправления или ссылки

Question

Я использую react-router v4 и material-ui в моем приложении React. Мне было интересно, как изменить URL-адрес после нажатия на GridTile в пределах GridList.

Моя первоначальная идея заключалась в использовании обработчика для onTouchTap. Тем не менее, единственный способ, которым я могу перенаправить, - это использовать компоненты Redirect или Link. Как изменить URL-адрес без рендеринга этих двух компонентов?

Я пробовал this.context.router.push('/foo'), но он не работает.

Answer 1

Попробуйте это,

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

предупреждение работает для версий до v4

Answer 2

Я использую это для перенаправления с Реагировать Router v4:

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

Надеюсь, он сработает для вас;)

Answer 3

Реагировать маршрутизатор v4

Там есть несколько вещей, которые мне нужно, чтобы получить эту работу гладко.

Документ doc на auth workflow имеет довольно много необходимого.

Однако у меня было три проблемы

1. Где делает props.history взялось?
2. Как передать его до моего компонента, который не является непосредственно внутри Route компонента
3. Что делать, если я хочу другой props?

Я закончил с использованием:

1. вариант 2 из an answer on 'Programmatically navigate using react router' - т.е. использовать <Route render>, который получает вас props.history, которые затем могут быть переданы детям.
2. Используйте render={routeProps => <MyComponent {...props} {routeProps} />} объединить другие props из this answer on 'react-router - pass props to handler component'

нотабене С помощью метода render вы должны явно пройти через реквизит из компонента Route. Вы также можете использовать render, а не component по соображениям производительности (component заставляет перезагружать каждый раз).

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

Одна из запутанных вещей, которые я нашел, что в целом ряде из React маршрутизатора v4 документов они используют MyComponent = ({ match }) т.е.Object destructuring, что означало изначально я не понял, что Route проходит вниз три реквизита, match, location и history

Я думаю, что некоторые другие ответы здесь, предполагая, что все это делается с помощью классов JavaScript.

Вот пример, плюс, если вам не нужно проходить любой props через вы можете просто использовать 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

Это, как я сделал подобную вещь. У меня есть плитки, которые являются миниатюрами для видео на YouTube. Когда я нажимаю на плитку, она перенаправляет меня на страницу «игрока», которая использует «video_id», чтобы отобразить правильное видео на странице.

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

ETA: К сожалению, только заметил, что вы не хотите использовать LINK или перенаправлять компоненты по какой-то причине. Может быть, мой ответ все равно поможет. ;)