Question

我是新来的人。我已经使用CRA创建了我的应用。

我尝试构建平滑的整页过渡，不仅在我们可以使用react-transition-group进行渲染的组件上为此，我尝试在点击标签时手动重定向。

但是仅更改URL ，但是页面未重新呈现...

我已经尝试过this.context（未定义），<重定向>，我将文档和许多文章都涂成红色，但无法弄清楚它是如何工作的。

这是我的代码

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();

App.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);

Home.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>
        )
    }
}

history.js

import { createBrowserHistory } from "history";
export default createBrowserHistory();

Answer 1

您可以尝试将history对象作为道具传递给index.jsx文件中的<BrowserRouter>组件吗？

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

带开关的历史记录推送不会重定向

1 个答案: