Route mit Browserhistory Änderungen URL reagieren, aber nichts passiert

Question

Ich versuche, eine Reaktion Router zu arbeiten. Dies ist mein Code:

var hashHistory = require('react-router-dom').hashHistory; 
var BrowserRouter = require('react-router-dom').BrowserRouter; 
var Route = require('react-router-dom').Route; 
var ReactDOM = require('react-dom'); 
var React = require('react'); 
var Index = require('./index'); 
var Login = require('./login'); 

ReactDOM.render(
    <BrowserRouter history={hashHistory}> 
     <div> 
      <Route path="/" component={Index} /> 
      <Route path="/login" component={Login} /> 
     </div> 
    </BrowserRouter>, 
    document.getElementById('main-content') 
); 

und dann später in meinem index.js ich das tun:

<div className="navbar-nav" onClick={() => this.props.history.push('/login')}> 
        Log in 
       </div> 

Dies macht zu/login die URL ändert aber nicht die Login-Datei machen. Was ist falsch?

Answer 1

Es scheint, wie wenn man zu /login schalt sie paßt zu /:

<Route path="/" component={Index} /> 

Try exact prop auf die Route, wie dies hinzuzufügen:

<Route exact path="/" component={Index} /> 

Was Sie auch tun können versuchen, zu ist, die übereinstimmende Reihenfolge zu ändern:

<Route path="/login" component={Login} /> 
<Route path="/" component={Index} /> 

Answer 2

Ist Ihre index.js eine separate Datei oder Komponente? In diesem Fall müssen Sie die Router-Middleware verwenden, um sie mit react-router zu verbinden.

Importieren Sie entweder die Komponente Link und verwenden Sie sie direkt, , oder binden Sie einen Klickhandler und wickeln Sie withRouter ein, um die Routeraufrufe an die Requisiten anzuhängen.

import React from 'react'; 
import {Link, withRouter} from 'react-router'; 

class Test extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handleLink = this.handleLink.bind(this); 
    } 

    handleLink() { 
     this.props.history.push('/login') 
    } 

    render() { 
     return (
      <div> 
       <Link to={{pathname: '/login'}}>Link</Link> 
       <button onClick={this.handleLink}>Click</button> 
      </div> 
     ); 
    } 

} 

export default withRouter(Test);