在 react-router-dom 中重定向？

Posted 2023-02-22

【中文标题】在 react-router-dom 中重定向？

【英文标题】：Redirect in react-router-dom?

【发布时间】：2018-02-04 00:55:18

【问题描述】：

自从我开始使用 react/redux 以来，我第一次使用 react-router-dom 应用程序，但我在使用 Redirect 组件时遇到了问题。

我想在身份验证成功时触发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 库，对于我在代码中出现的任何愚蠢错误，我深表歉意。

谢谢你，请了解我！

【问题讨论】：

你说它不会重定向到/page1 路由。那它去哪儿了？

它停留在/路由中。

Ok... 尝试将exact path 用于您的/ 路由，因为这将匹配所有其他路由。让我知道这是否有效，以便我可以将其添加到答案中。 <Route exact path="/" component=App/><Route exact path="/" component=Signin/>

【参考方案1】：

而不是Redirect 使用this.props.history.push('/path1') 并将connect() 包装在withRouter（从react-router 导入）中，如下所示：

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

如果要使用Redirect，请将已认证的值保持在本地状态，在componentWillReceiveProps中更新，并在render方法中有条件地渲染<Redirect />。