Reactjs react router browserHistory.push不'；t导航到新页面

我试着在和中遵循解决方案，但仍然有困难

我使用的是react路由器版本2.4.1、react版本15.1.0和webpack 1.13.1

我有一个路由器，设置如下：

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';
import Component from './component';
import Merchant from './merchant';
import CreateMerchant from './create-merchant';
require('bootstrap/dist/css/bootstrap.css');
// /* globals document, window */
//
// const { pathname, search, hash } = window.location
// const location = `${pathname}${search}${hash}`

render((
    <Router history={browserHistory}>
        <Route path="/" component={Component}/>
        <Route path="/merchant" component={CreateMerchant}/>
        <Route path="/merchant/:merchantId" component={Merchant}/>
    </Router>
), document.getElementById("app"))

从“React”导入React；
从'react dom'导入{render}；
从“react Router”导入{Router，Route，Link，browserHistory}；
从“./Component”导入组件；
从“/商户”进口商户；
从“/创建商户”导入CreateMerchant；
要求（'bootstrap/dist/css/bootstrap.css'）；
///*全局文档，窗口*/
//
//const{pathname，search，hash}=window.location
//常量位置=`${pathname}${search}${hash}`
渲染((
)，document.getElementById（“应用程序”））

当我转到时，我看到了预期的组件：

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

export default class Component extends React.Component {
    handleSubmit(event) {
        const merchantId = event.target.elements[1].value;

        console.log("Merchant id is " + merchantId);

        const path = `/#/merchant/${merchantId}`;

        browserHistory.push(path);
    }


    render() {
        return <div className="container">
            <h1>Welcome to VPager!</h1>
            <h2>Would you like to create a merchant?</h2>
            <div className="row">
                <div className="col-md-6">
                    <Link className="btn btn-primary" to="/merchant">Yes, create a merchant and start taking
                        customers.</Link>
                </div>
            </div>

            <h2>Or do you have an existing merchant?</h2>
            <form onSubmit={this.handleSubmit.bind(this)}>
                <div className="row">
                    <div className="col-md-3">
                        <button type="submit" className="btn btn-primary">I have an
                            existing merchant ID, and it is:</button>
                    </div>
                    <div className="col-md-2"><input id="merchantId" className="form-control" type="number" /></div>
                </div>
            </form>
        </div>
    }
}

从“React”导入React；
从“反应路由器”导入{Link，browserHistory}；
导出默认类组件扩展React.Component{
handleSubmit（事件）{
const merchantId=event.target.elements[1]。值；
控制台日志（“商户id为”+merchantId）；
const path=`/#/merchant/${merchantId}`；
browserHistory.push（路径）；
}
render（）{
返回
欢迎来到VPager！
您想创建一个商户吗？
是，创建一个商户并开始购买
客户。
或者你有一个现有的商人？
我有一个
现有商户ID，并且它是：
}
}

但是，当我单击第二个按钮时，地址栏中的URL会更改，但新视图不会呈现

人们似乎有，但这些解决方案也不起作用

我还尝试使用顶级组件嵌套这些路由。然而，在这种情况下，我得到一个错误，即“根路由必须只呈现一个元素。”

如何让表单导航到新视图？

您的

路径

变量中有一个错误

，可能是使用

哈希历史记录

留下的。如果不考虑它，它应该会起作用：

const path = `/merchant/${merchantId}`

---

页面刷新了吗？您的提交处理函数中是否缺少

event.preventDefault（）

？没有页面刷新，也没有

event.preventDefault（）

。即使打了那个电话，它也会做同样的事情。哦。。我刚刚注意到您的

路径中有一个
，但您没有使用
hashHistory
。它应该是'const path=
/merchant/${merchantId}
是的，我真是太傻了。如果你把它作为一个答案，我会接受的。