自从我开始使用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'));
登录.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')
并包裹 connect()
在withRouter
(从react-router导入)像这样:
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Signin));
如果要使用重定向,请在本地状态中维护经过身份验证的值,并在 componentWillReceiveProps
中更新它并有条件地渲染 <Redirect />
在渲染方法中。
关于reactjs - 在react-router-dom中重定向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45890453/