У меня проблема с использованием маршрутизатора реагировать, редуцировать и реагировать.
Когда я перемещаюсь по страницам с использованием , компоненты не полностью повторно визуализируются.
Например: еслиЯ нахожусь на странице входа в систему и перехожу на страницу регистрации (используя ссылку), в последнем случае некоторые элементы css / js не будут отображаться правильно.
Вот мой код: (без импорта и не имеет значениядетали)
Основной компонент
class App extends Component {
render() {
return (
<div className="container-scroller">
<LoadingBar showFastActions style={{ backgroundColor: 'orange', height: '4px' }} />
<BrowserRouter>
<Router history={History}>
<Switch>
<PrivateRoute exact path="/" component={DashboardPage} />
<PrivateRoute exact path="/facility" component={FacilityPage} />
<Route exact path="/register" component={RegisterPage} />
<Route exact path="/signin" component={SignInPage} />
<Route exact path="/signout" component={Signout} />
<Route component={NotFoundPage} />
</Switch>
</Router>
</BrowserRouter>
</div>
);
}
}
export default App;
Страница входа:
class SignInPage extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
}
handleChange = e => {
const { name, value } = e.target;
this.setState({ [name]: value });
}
handleSubmit = e => {
e.preventDefault();
this.props.signIn(this.state.inputEmail, this.state.inputPassword);
}
render() {
{/* redirect user if already logged in */}
let token = localStorage.getItem('token');
if (token) {
return <Redirect to='/' />
}
return (
// sign in form
<div className="mt-3 text-center">
<Link to="/register" className="auth-link text-white">
Don't have an account ?
<span class="font-weight-medium"> Sign in</span>
</Link>
</div>
)
}
}
const mapStateToProps = state => {
return {
errors: state.auth.errors,
};
}
const mapDispatchToProps = dispatch => {
return {
signIn: (email, password) => {
return dispatch(userActions.signIn(email, password));
}
};
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignInPage));
Страница регистрации:
import '../../node_modules/jquery-validation/dist/jquery.validate.min.js';
import '../assets/js/form-validation.js';
class RegisterPage extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
password_confirmation: '',
first_name: '',
last_name: '',
};
}
handleChange = e => {
const { name, value } = e.target;
this.setState({ [name]: value });
}
handleSubmit = e => {
e.preventDefault();
}
render() {
{/* redirect user if already logged in */}
let token = localStorage.getItem('token');
if (token) {
return <Redirect to='/' />
}
return (
// register form
)
}
}
const mapStateToProps = state => {
return {
errors: state.users.errors,
};
}
const mapDispatchToProps = dispatch => {
return {
signIn: (email, password, firstName, lastName) => {
return dispatch(userActions.register(email, password, firstName, lastName));
}
};
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RegisterPage));
Кажется, я не единственный, у кого есть эта проблема.Я пробовал решение withRouter, и оно не работает.
Кто-нибудь может мне помочь?
Заранее спасибо!