react-router-domでリダイレクトしますか？

Question

私はreact/reduxを使い始めてから初めてRedirectコンポーネントを使用しているので、私はreact-router-domアプリを初めて開発しています。

認証が成功したときにRedirectを発射したいが、認証後に必要なページにリダイレクトしない。

index.js

import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import { createStore, applyMiddleware } from 'redux'; 
import ReduxThunk from 'redux-thunk'; 

import App from './components/app'; 
import Page1 from './containers/page1'; 
import Signin from './containers/auth/signin'; 

import Reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore); 
const store = createStoreWithMiddleware(Reducers); 

ReactDOM.render(
    <Provider store={store}> 
    <Router> 
     <div> 
     <Route path="/" component={App}/> 
     <Route path="/" component={Signin}/> 
     <Route path="/signin" component={Signin}/> 
     <Route path="/page1" component={Page1}/> 
     </div> 
    </Router> 
    </Provider> 
, document.querySelector('.container')); 

signin.jsこのコードで

import { BrowserRouter as Route, Redirect } from 'react-router-dom'; 

import { userSignin } from '../../actions/index'; 

class Signin extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { username: '', password: '' }; 

    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleUsernameChange = this.handleUsernameChange.bind(this); 
    this.handlePasswordChange = this.handlePasswordChange.bind(this); 
    } 

    componentWillUpdate(nextProps) { 
    if (this.props.authenticated !== nextProps.authenticated) { 
     if (nextProps.authenticated) { 
     console.log('true?', nextProps.authenticated) 
     return (
      <Redirect to="/page1" /> 
     ); 
     } 
    } 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    this.props.userSignin({ username: this.state.username, password: this.state.password }); 
    this.setState({ username: '', password: '' }); 
    } 
    ..... 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <input 
      placeholder="username" 
      value={this.state.username} 
      onChange={this.handleUsernameChange} 
     /> 
     <input 
      placeholder="password" 
      type="password" 
      value={this.state.password} 
      onChange={this.handlePasswordChange} 
     /> 
     <span> 
      <button type="submit">SIGNIN</button> 
     </span> 
     {this.renderError()} 
     </form> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    authenticated: state.auth.authenticated, 
    errMsg: state.auth.err 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    userSignin: ({ username, password }) => dispatch(userSignin({ username, password })) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Signin); 

、これはtrue?ログんが、/page1にリダイレクトしません。

私が言及したように、これは初めてreact-router-domライブラリを使用しています。私は自分のコードにある間違ったことをお詫びします。

ありがとうございました！代わりにRedirect使用this.props.history.push('/path1')の

Answer 1

と、このようwithRouterでconnect()（反応し、ルータからのインポート）をラップ：あなたがリダイレクトを使用する場合は、ローカル状態で認証された値を維持

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Signin)); 

、それを更新componentWillReceivePropsで、レンダリングメソッドで条件付きで<Redirect />をレンダリングします。