Невозможно прочитать свойство «pushState» undefined

Question

У меня есть эта простая конфигурация для React Router. У меня есть еще один, в основном обертывающий ..., который работает. Но это одна не (конечно, я пытался использовать с различными реализациями, как предложено в ответах this post и многие другие.

Ошибка консоли название этой должности. Использование ES6 и реагировать маршрутизаторами V 0,1 с на основе хэш-маршрутизации.

Я прочитал много статей, слишком ненужными для простой маршрутизации должны быть реализованы, и почти ненавидя реагировать и реагировать-маршрутизатор в настоящее время. Пожалуйста, помогите.

componentWillReceiveProps() { 
     this.contextTypes = { 
      history: React.PropTypes.object 
     } 
    }, 
    _handleRoute(e) { 
     e.preventDefault() 
     this.history.pushState(null, `/somepath`); 
    }, 
    render() { 
     return(
      <div onClick={this._handleRoute}> 
      Some Content. 
      </div> 
     ); 
     } 

или:

render() { 
     return(
      <div> 
      <Link to={`/somepath`}> link </Link> 
      </div> 
     ); 
     } 

Answer 1

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

Там же метод PushState в объект истории сделал для этого.

Первый компонент назначается для маршрутизатора должен дать ребенку компоненту метод PushState как функции опоры:

//Router Component 
render() 
    return (
    <SomeComponent changeRoute={this.props.history.pushState} 
) 

Затем в компоненте, который я хочу изменить маршрут в зависимости, я просто сделать:

//SomeComponent 
onClick() { 
    this.props.changeRoute(null, 'somepath', {query: "something"}); 
} 

Реагировать маршрутизатор v.2

import {browserHistory} from 'react-router'; 

//SomeComponent 

browserHistory.push('somepath'); 

Answer 2

Ошибка, которую вы получаете, предполагает, что context.history не определен.

Скорее всего, это связано с тем, что вы не показываете <Router> или эквивалентный компонент на верхнем уровне. Попробуйте начать с некоторых примеров, предоставляемых React Router, и модифицировать их в соответствии с вашим конкретным вариантом использования.

Answer 3

Это было слишком долго, так как я задал этот д, но я думал, что ответить на самый простой и основной ответ, который я нашел, что это будет работать, а именно:

location.hash: '/some-route?sheeps=black'; 

Если у кого-то есть лучше, более «Реагировать» на это; ответьте, пожалуйста. Я по-прежнему не считаю этот ответ правильным.

Answer 4

Update Ответ с Новым Реагировать Разгром и обновление Реагировать На сегодняшний день: 07/29/2017

Все версии:

"history": "^4.6.3", 
"react": "^15.6.1", 
"react-dom": "^15.6.1", 
"react-router": "^4.1.2", 
"react-router-dom": "^4.1.2", 
"webpack": "^3.3.0", 
"webpack-dev-server": "^2.5.1" 

MY Разгром Посмотрите, как это ...

import {BrowserRouter,Route,Link} from 'react-router-dom'; // for BrowserRouter rout 

<BrowserRouter> 
     <div> 
      <Route exact path='/' component={Layout}></Route> 
      <Route path='/about' name="about" component={about}> </Route> 
      <Route path='/protfolio' name="protfolio" component={protfolio}></Route> 
     </div> 
    </BrowserRouter > 

Подробнее о новых React Rout Quick Start

Для Ссылка Посмотреть или нав Посмотреть

<Link to="/about">Check rout link protfolio</Link> 
    <Link to="/protfolio">Check rout link protfolio</Link> 
    <button onClick={this.navigate.bind(this)}>button binf</button> 

окончательный вид:

navigate(){ 
     this.props.history.replace('/', null); 
    } 

если взять console.log(this.props.history); Тогда ваш браузер консоли вы получите его ...

push:function push(path, state)

Так не может использовать его как this.props.history.replace(null, '/');

Потому что здесь путь является недействительным, это не представляется возможным.