Javascript 使用browserhistory更改url的反应路由，但什么也没有发生

我在试着让路由器工作。这是我的代码：

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

var hashHistory=require（'react-router-dom'）。hashHistory；
var BrowserRouter=require（'react-router-dom'）。BrowserRouter；
var Route=require（'react-router-dom'）。路由；
var ReactDOM=require（'react-dom'）；
var React=要求（'React'）；
风险值指数=要求（'./指数'）；
var Login=require（'./Login'）；
ReactDOM.render(
,
document.getElementById（'main-content'）
);

之后在我的index.js中，我会这样做：

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

this.props.history.push（'/login'）}>
登录

---

这会将url更改为/login，但不会呈现登录文件。怎么了？

当您切换到

/login

时，它似乎与

/

匹配：

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

您还可以尝试更改匹配顺序：

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

---

您的index.js是一个单独的文件还是组件？如果是这样，您需要使用路由器中间件将其连接到

react路由器

导入

链接

组件并直接使用， 或者绑定一个点击处理程序并用路由器包裹

，将路由器调用装载到道具

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

从“React”导入React；
从“反应路由器”导入{Link，withRouter}；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleLink=this.handleLink.bind（this）；
}
handleLink（）{
this.props.history.push（“/login”）
}
render（）{
返回(
链接
点击
);
}
}
使用路由器导出默认值（测试）；

是的，就是这样！：）谢谢

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