Reactjs - cannot read push undefined properties

Question

I have this code. What I want to do is when I press the "function" button, this will lead me to indicate the route. However, React continues to say: “Can't read the push of the undefined property.” What did I do wrong?

route.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute } from "react-router";

import Layout from "./page/Layout";
import Features from "./page/Features";
import Features from "./page/archive";

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

Layout Component

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate(){
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}

package.json - partial

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
 "history": "^2.0.1",

------------- update for jordan's answer -------------

Answer 1

export default class Layout extends React.Component{

    navigate = () => {
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}
Layout.contextTypes = {
    router: PropTypes.object.isRequired
}

Answer 2

React Router v4 . BrowserRouter HashRouter "response-router-dom". , , .

history.

createHistory :

import createHistory from 'history/createBrowserHistory'

, :

import { createHashHistory } from 'history'

export const history = createHashHistory()

:

history.push('/page')

, , . , .

Answer 3

route.js

import {Router, browserHistory} from 'react-router';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

, ,

 import {Router, browserHistory} from 'react-router';

 browserHistory.push('/');

- browserHistory hashHistory

hashHistory URL, . hashHistory , , browserHistory.

Answer 4

browserHistory HashHistory. :

import { browserHistory } from 'react-router'
// ...
// ...

   navigate(){
        browserHistory.push('/');
    }

Answer 5

, . , . , .

//main.js

<BrowserRouter>
    <div>
        <Route path="/" component={Home}/>
        <Route path="/techMap" component={TechMap}/>
    </div>
 </BrowserRouter>

//app.js

<div>
   <TechStack history= {this.props.history}/>
</div>

//techstack.js

<div>
    <span onClick={this.search.bind(this)}>
    </span>
 </div>
)

search(e){
 this.props.history.push('/some_url');
}

TechStack - .

app.js, tech.js. , , tech.js

Answer 6

browserHistory. React-router-dom . - "", - , , .

, , , onClick

redirectToPage() {
 this.props.history.push('/page'); OR
 this.context.router.history.push('/page');
}

redirectToSessionStatePage() {
 props.history.push('/page');OR
 context.router.history.push('/page');
}

Answer 7

"", ES6.

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate = () => {
        this.context.router.push('/');
    }

    render(){ 
      return(
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      )
    }
}

Answer 8

, , /. :

import Features from "./page/Features";
import Features from "./page/archive";