2017-09-14 21 views
0

リアクションルータ4を使用して経路を条件付きでプッシュするにはどうすればよいですか?私は 'history.pushは関数ではありません'というエラーを受け取ります。history.push in react router 4

私はリダイレクトを探していませんが、ブラウザの戻るボタンも機能します。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter, Switch, Route, Redirect} from 'react-router-dom'; 


import Signup from './components/Signup'; 
import Welcome from './components/Welcome'; 


class App extends React.Component { 

    constructor() { 
     super(); 
     this.state = { 
      isLoggedIn: false 
     }; 
    } 

    render() { 
     return (
      <BrowserRouter> 
       <div> 
        <Route exact path="/signup" component={Signup}/> 
        <Route exact path="/welcome" component={Welcome}/> 
        <Route exact path="/" render={() => (
         this.state.isLoggedIn ? 
          history.push('/welcome') : history.push('/signup') 
        )}/> 
        <Redirect to="/"/> 
       </div> 
      </BrowserRouter> 
     ); 

    } 
} 


ReactDOM.render(<App/>, document.getElementById('root')); 
+0

これは役立つかもしれない私:)に間違っていると感じたブラウザの履歴にプッシュされます。https://stackoverflow.com/questions/42474176/条件付きコンポーネントを使用して同じルートパス内の反応を使用する – Dev

+0

私はそれを見ました。この履歴には影響しません。条件付きでコンポーネントを表示します。 –

答えて

1

リダイレクトコンポーネントには、必要なものを正確に行うオプションがあります。

<Redirect to="/" push /> 

は、ナビゲーションを行う、とも

history.pushは常に

+0

シンプルでエレガントです。ありがとう。 –

関連する問題