2017-07-06 33 views
0

私はreact-router v4を使用していますが、ログイン・コンポーネントからメイン・ページ(索引)にリダイレクトできませんでした。これはリダイレクトするボタンがあるコードの例です直接。リアクタ・ルータv4 - ログイン・ルータのホーム・ページ

Login.js

constructor(props) 
{ 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
} 

handleClick(e) { 
    e.preventDefault(); 
    this.context.router.history.push('/home'); 
} 

<button onClick={(e) => this.handleClick(e)}> 
    Navigate 
</button> 

Index.js

ReactDOM.render((
<Provider store={store}> 
    <Router history={hashHistory}> 
      <MuiThemeProvider> 
       <div> 
        <Login> 
         <div> 
          <SearchBar/> 
          <MainMenu/> 
         </div> 
         <Switch> 
          <Route path="/home" component={Home}/> 
          <Route path="/calendar" component={Calendar}/> 
          <Route path="/about" component={About}/> 
         </Switch> 
         <Footer/> 
        </Login> 
       </div> 
      </MuiThemeProvider> 
    </Router> 
</Provider> 
),document.getElementById('content')); 
+0

」コンポーネントを使用してみましたか? – Li357

+1

コンテキストの代わりに小道具を使ってみてください: 'this.props.router.push( '/ some/path')' –

+0

私はあなたの解決策が正しいと思っています。 – maritzap

答えて

0

解決策1:シンプルなソリューションのリンク

を使用して、あなたからLinkコンポーネントを使用することができますreact-router-domLogin.jsのボタンをクリックします。 JSのルートを変更する方法はありますが、これは簡単な方法です。

あなたが最初にログインをインポートする必要があります。

import {Link} from 'react-router-dom'; 

をして、これであなたの<button>handleClick()を置き換える:

<span className="someclass"> 
    <Link to="/home" />Navigate</Link> 
</span> 

解決方法2:リダイレクト

<Redirect exact from='/' to='/home' /> 

P.S.を使用して現在のコード設定では、this.context.router.history.push('/home')の代わりにhandleClick()this.props.history.push('/home')を使用してみることもできます。

関連する問題