browserhistoryを使用して反応ルートがURLを変更しますが、何も起こりません。

Question

私は反応ルータを稼働させようとしています。これは私のコードです：

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の変更を行いますが、ログインファイルをレンダリングしません。なにが問題ですか？

Answer 1

あなたは/loginに切り替えると、それは/に一致するように思え：

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

このように、ルートにexact小道具を追加してください：あなたもやろうとすることができる

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

何一致する注文を変更する：

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

Answer 2

index.jsは別のファイルまたはコンポーネントですか？その場合は、ルータミドルウェアを使用してreact-routerに接続する必要があります。

Linkコンポーネントをインポートして直接使用するか、 を使用するか、クリックハンドラをバインドしてwithRouterをラップして、ルータへの呼び出しを実装します。

​​