история pu sh с переключателем не перенаправляет

Question

Я новичок, чтобы реагировать. Я использовал 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();

Answer 1

Можете ли вы попробовать передать объект history в качестве реквизита компоненту <BrowserRouter> в файле index.jsx?

import history from 'js/core/history.js'
<BrowserRouter history={history}>
        <App />
    </BrowserRouter>