Nie można odczytać właściwości "pushState" o niezdefiniowanym

Question

Mam tę prostą konfigurację dla routera reakcji. Mam inny z zasadniczo owijający z ..., który działa. Ale to nie robi (oczywiście próbowałem korzystać z różnych implementacjach jak sugeruje się w odpowiedziach this post i wielu innych.

Błąd konsola jest tytuł tego postu. Korzystanie ES6 i reagują-Router v 0,1 z routingiem hash oparte.

czytam dużo artykułów, za zbędne dla prosty routing być realizowane, a prawie nienawidzić reagować i reagować-routera teraz. Proszę o pomoc.

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

lub:

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

Answer 1

React Router v1:

Jest metoda pushState w historii obiektu w tej sprawie.

Pierwszy składnik przypisany do routera musi nadać elementowi dziecko metodę pushState jako rekwizyt funkcji:

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

Następnie w składnik, który chcę zmienić trasę w funkcji, po prostu zrobić:

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

React Router v.2

import {browserHistory} from 'react-router'; 

//SomeComponent 

browserHistory.push('somepath'); 

Answer 2

Błąd, który otrzymujesz, sugeruje, że context.history nie jest zdefiniowany.

Najprawdopodobniej oznacza to, że nie renderujesz komponentu <Router> lub równoważnego na najwyższym poziomie. Spróbuj zacznij od niektórych przykładów dostarczonych z Routerem React i modyfikuj je, aby pasowały do ​​Twojego konkretnego przypadku użycia.

Answer 3

To było zbyt dawno poprosiłem to pytanie, ale myślałem, że odpowiedź na najprostsze i podstawowe odpowiedź, że mam okazało się, że praca, która jest:

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

Jeśli ktokolwiek ma lepszy, bardziej "Reaktowy sposób" robienia tego; proszę odpowiedz. Wciąż nie zaznaczam tej odpowiedzi jako prawidłowej.

Answer 4

Aktualizacja Odpowiedź z Nowego React Rout i aktualizacja React Do dziś dzień: 07/29/2017

Wszystko Wersja:

"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 Rout wyglądać jak ...

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 > 

Więcej szczegółów na temat New React Rout Quick Start

Dla link Zobacz lub Nawigacja

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

Look końcowa:

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

jeśli wziąć console.log(this.props.history); Następnie konsola Przeglądarka je dostać ...

push:function push(path, state)

Więc może nie używać go jak this.props.history.replace(null, '/');

Bo tu ścieżka jest null nie jest to możliwe.