Reagieren Router definieren meine eigene Link-

Question

So ist die Umsetzung des <Link /> onClick, die den Router Navigation Griffe ist einfach:

const { history } = this.context.router; 

history.push(to); 

, die aus dem github repo

in meinem application es sollte also gezogen wird funktionieren, weil der Kontext wird von der Komponente <Router> rechts weitergegeben?

class App extends React.Component { 
    constructor() { 
    super(...arguments); 
    } 

    render() { 
    const home =() => (<div>Home</div>); 
    const about =() => (<div>About</div>); 
    const { history } = this.context.router; 

    console.log("History", history); 

    return (
     <div> 
     <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/about">About</Link></li> 
     </ul> 

     <Route exact path="/" component={home} /> 
     <Route path="/about" component={about} /> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <Router> 
    <App /> 
    </Router>, 
    document.getElementById('main') 
); 

Aber wie Sie in der Konsolenausgabe, die Geschichte Objekt nicht definiert ist sehen ....

Answer 1

Gerade Azium Kommentar zu klären:

class App extends React.Component { 
    constructor() { 
    super(...arguments); 
    } 

    render() { 
    const home =() => (<div>Home</div>); 
    const about =() => (<div>About</div>); 
    const { history } = this.props; 

    console.log("History", history); 

    return (
     <div> 
     <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/about">About</Link></li> 
     </ul> 

     <Route exact path="/" component={home} /> 
     <Route path="/about" component={about} /> 
     </div> 
    ) 
    } 
} 

const AppWithRouter = withRouter(App); 

ReactDOM.render(
    <Router> 
    <AppWithRouter /> 
    </Router>, 
    document.getElementById('main') 
); 

withRouter gibt Ihnen passen, Standort, Geschichte auf den Stützen.