我使用的是 React router 4 而不是 React router 3,所以我使用的是 react-router-dom。我试图让 this.props.history.push 工作,但它所做的只是保持 View 不变,但 URL 发生变化。
例如,我单击按钮,它调用一个函数,该函数仅调用 this.props.history.push('/posts')。 url 从 localhost:3000/signin 更改为 localhost:3000/posts。但我仍在登录 View 中。
如果我点击刷新,它将重定向到帖子页面。我看过其他问题,那些人无论如何都无法让它去那里,即使他们刷新或进入 url 并按回车键也是如此。
我将在下面发布代码以查看我做错了什么。此外,我使用的是 react router v4 而不是 3。我不能使用 browserHistory.push 和 v3 使用的其他东西。
代码:
组件:
import React, { Component } from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions';
import {withRouter} from 'react-router';
class Signin extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
renderField(field) {
const { meta: {touched, error} } = field;
const className = `form-group ${touched && error ? 'has-danger' : ''}`;
return (
<div className={className}>
<label><strong>{field.label}:</strong></label>
<input
className="form-control"
type={field.type}
{...field.input}
/>
<div className="text-help">
{ touched ? error : ''}
</div>
</div>
)
}
onSubmit({email, password}) {
// this.props.signinUser({email, password}, () => {
this.props.history.push('/posts');
// });
}
renderAlert() {
if(this.props.errorMessage) {
return (
<div className="alert alert-danger">
<strong>Oops</strong> {this.props.errorMessage}
</div>
)
}
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit)}>
<Field
label="Email"
name="email"
type="email"
component={this.renderField}
/>
<Field
label="Password"
name="password"
type="password"
component={this.renderField}
/>
{this.renderAlert()}
<button type="submit" className="btn btn-success">Sign In</button>
</form>
);
}
}
function validate(values) {
const errors = {};
//Validate the inputs from values
if(!values.email) {
errors.email = "Enter an email!";
}
if(!values.password) {
errors.password = "Enter a password!";
}
//If errors is empty, the form is fine to submit
//If errors has any properties, redux form assumes form is invalid
return errors;
}
function mapStateToProps(state) {
return {
errorMessage: state.auth.error
};
}
export default reduxForm({
validate,
form: 'signin'
})(connect(mapStateToProps, actions)(withRouter(Signin)));
行动:
export function signinUser({email, password}, cb) {
return function(dispatch) {
axios.post(`${ROOT_URL}/signin`, {email, password})
.then((response) => {
dispatch({type: AUTH_USER});
localStorage.setItem('token', response.data.token);
})
.then(() => cb())
.catch((error) => {
dispatch(authError(error.response.data.error));
})
}
}
最佳答案
我发现问题不在我发布的代码中,而是我如何处理我的路线。确保在路由时没有将路由作为组件嵌套为路由。例如我有:
const Routes = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
)
这里我已经将 App 作为组件导入(或者它作为组件导出),我将它从组件更改为普通功能。为了更清楚地说明这一点,我将在下面放置旧代码和新代码:
旧的:
class App extends React.Component {
render() {
return (
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route path="/signin" component={RequireUnAuth(Signin)} />
<Route path="/signout" component={Signout} />
<Route path="/signup" component={Signup} />
<Route path="/posts" component={Posts} />
</Switch>
</div>
)
}
}
新:
const App = () => (
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route path="/signin" component={RequireUnAuth(Signin)} />
<Route path="/signout" component={Signout} />
<Route path="/signup" component={Signup} />
<Route path="/posts" component={Posts} />
</Switch>
</div>
)
这是正在导出的应用程序,一旦我切换到一个简单的函数而不是基于组件的类,一切正常。我不必进行硬刷新,我可以单击返回,它会返回,使用 this.props.history.push 进行重定向等...
关于reactjs - URL 更改但 View 在 React Router 4 中没有更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44509790/