使用开关推送历史记录不会重定向

Question

我是新手。 我已使用 CRA 创建我的应用程序。

我尝试构建一个平滑的整页过渡，而不仅仅是在渲染的组件上，就像我们可以对 react-transition-group 所做的那样 为此，我尝试在单击标签时手动重定向。

但是只有网址被更改，但页面没有重新呈现......

我已经尝试过使用this.context(未定义(，<重定向>，我红色了文档和许多文章，但无法弄清楚它是如何工作的。

这是我的代码

索引.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对象作为 props 传递给 index.jsx 文件中的<BrowserRouter>组件吗？

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