使用 browserhistory 更改 url 响应路由但没有任何反应答案

【问题标题】：react route using browserhistory changes url but nothing happens使用 browserhistory 更改 url 响应路由但没有任何反应
【发布时间】：2017-11-03 20:17:48
【问题描述】：

我正在尝试让反应路由器工作。这是我的代码：

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

然后在我的 index.js 中我这样做：

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

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

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

当您切换到/login 时，它似乎与/ 匹配：

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

尝试在路由中添加exact prop，如下所示：

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

你也可以尝试改变匹配顺序：

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

【讨论】：

是的，就是这样！ :) 谢谢！

【解决方案2】：

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

要么导入Link组件直接使用，或绑定一个点击处理程序并包装withRouter 以将路由器调用挂载到道具。

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

【讨论】：