Question

我不确定我缺少什么，但是试图通过历史回溯，但是不起作用。 URL更改，但是页面不呈现。如果我再次单击“后退”按钮，URL将返回到该页面之前的页面，然后呈现该页面。

所有history.push(path)正常工作。

我的应用实现了React-Router和Redux，请参见下面的代码：

索引：

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

const store = configureStore(history);

//preloader
const loader = document.querySelector('.loader');
const showLoader = () => loader.classList.remove('loader-hide');
const hideLoader = () => loader.classList.add('loader-hide');

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <AppRoot
                hideLoader={hideLoader}
                showLoader={showLoader}
            />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'));

AppRoot：

class AppRoot extends React.Component {
    constructor(props) {
        super(props);
        ///...other things
    }

    componentDidMount() {
        this.props.hideLoader();
    }

    render() {
        return (
            <React.Fragment>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/login' component={Login} />
                    <PrivateRoute exact path="/app" component={App} />
                    <Route component={NotFound} />
                </Switch>
            </React.Fragment>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: {
            signalrRActions: bindActionCreators(signalRStore.actionCreators, dispatch)
        }
    };
}

未找到

const NotFound = ({ history }) => {
    return (       
        <div style={{ textAlign: 'center', color: '#c23030' }}>
            <br />
            <Icon icon="remove" iconSize={150} intent={Intent.DANGER} />
            <h1 style={{ fontSize: '150px', margin: '10px' }}>404</h1>
            <h1>Page Not Found</h1>
            <Button onClick={() => {
                history.goBack()
            }} text="Back" large={true} icon="arrow-left" />
        </div>
    );
}

export default NotFound;

发生点击时的历史对象：

React Router历史记录不回溯

0 个答案: