react-router browserHistory.pushは新しいページに移動しません

Question

私はthis questionとreact-router exampleの解決策に従おうとしましたが、まだ問題があります。

反応ルータバージョン2.4.1、Reactバージョン15.1.0、およびwebpack 1.13.1を使用しています。

私はこのように設定されているルータがあります。私は2番目のボタンをクリックすると、しかし、

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> 
    } 
} 

、：

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

を私はhttp://localhost:8080/に行くとき、私は期待通りのコンポーネントを参照してくださいアドレスバーのURLは変更されますが、新しいビューはレンダリングされません。

人々はsimilar issues in the pastを持っていたようですが、それらの解決策も機能していません。

また、creating a higher order componentを試して、ルートを最上位コンポーネントでネストしました。しかし、その場合は、「ルートルートは正確に1つの要素をレンダリングする必要があります」というエラーが表示されます。

フォームを新しいビューに移動するにはどうすればよいですか？

Answer 1

変数にエラー#があります。おそらくはhashHistoryが残っています。残しておいてください。

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