Я новичок, чтобы реагировать. Я использовал CRA для создания своего приложения.
Я пытаюсь создать плавный переход на всю страницу, а не только на компоненте, который отображается, как мы можем это сделать с реагирующей-переходной группой. Для этого я стараюсь перенаправление вручную при нажатии на тег.
Но изменяется только URL , но страница не перерисовывается ...
Я пытался использовать this.context (undefined), , я редактировал документы и многие статьи, но не мог понять, как это работает.
Вот мой код
index. js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.register();
Приложение. js
import React, { Component } from 'react'
import { BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom';
import './App.scss';
import history from 'js/core/history.js'
class App extends Component {
constructor(props) {
super(props);
this.state = {
isRedirecting: false
}
this.isRedirecting = false;
this.taContainer = React.createRef();
}
redirectHandler(location) {
if(location != null && location != undefined && !this.state.isRedirecting) {
this.setState({isRedirecting: true})
setTimeout(() => {
history.push(location);
this.setState({isRedirecting: false})
}, 1000)
}
}
render() {
return (
<div className="app">
<div className="inner-app">
<BackScene></BackScene>
<Router>
<Switch>
<Route exact path='/' render={(props) => <Home {...props} onClick={this.redirectHandler.bind(this)} />} />
<Route exact path={'/experiments'} render={(props) => <Experiments {...props} onClick={this.redirectHandler.bind(this)}/>
<Route exact path={'/experiments/:cat'} render={(props) => <Experiments {...props} />} />
<Route exact path={'/experiments/:cat/:slug'} render={(props) => <SingleProject {...props} />} />
<Route exact path={'/shader'} render={(props) => <ShaderTemplatePage {...props} />} />
</Switch>
</Router>
<div className="ta" ref={this.taContainer}>
<div className="ta-first"></div>
<div className="ta-second"></div>
</div>
</div>
</div>
);
}
}
export default withRouter(App);
Главная . js
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<div className='home page'>
<div className="inner-home">
<div className="content">
<h1 className='title'>Title</h1>
<a className='button' onClick={() => {this.props.onClick('/experiments')}}>Get started !<span></span></a>
<ul className="socials">
<li><a href="#"><i className='icon icon-twitter'></i></a></li>
<li><a href="#"><i className='icon icon-instagram'></i></a></li>
</ul>
</div>
</div>
</div>
)
}
}
история. js
import { createBrowserHistory } from "history";
export default createBrowserHistory();