Question

我正在构建一个使用react-router v4的react应用程序。我像这样正确定义了路由器。

 <Router>
        <Provider store={store}>
            <Switch>
                {/* Login Route */}
                <Route exact path="/" component={LoginForm} />
                <Route exact path="/?redirect=:id" component={LoginForm} />
                <Route path="/home" component={HomePage} />
                <Route path="/signuppage/create" component={SignUpPage} />
                <Route path="/t-and-c" component={TCPage} />
            </Switch>
        </Provider>
</Router>

现在，当我从家中进入注册页面并立即从注册页面转到T＆amp; C页面时如果我按下浏览器后退按钮，它会将我转发到HomePage /home路径。我正在使用react-router v4.2.0。

一切正常，直到我不使用redux，因为我在项目中添加了redux，打破了浏览器后退按钮。

这是我的组件

HomePage.tsx

import * as React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

export interface IHomePageProps {
    companyName: string;
}

export class HomePageImpl extends React.PureComponent<IHomePageProps, {}> {
    constructor() {
        super();
    }

    render() {
        return <div>
            <h1>Hello {this.props.companyName}</h1>
            <Link to="/signuppage/create">SignUp</Link>
        </div>
    }
}

export function mapStateToProps(state) {
    return {
        companyName: state.companyName
    }
};

export const HomePage = connect<{}, {}, IHomePageProps>(mapStateToProps)(HomePageImpl)

SingUpPage.tsx

import * as React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

export interface ISignUpPageProps {
    companyName: string;
}

export class SignUpPageImpl extends React.PureComponent<ISignUpPageProps, {}> {
    constructor() {
        super();
    }

    render() {
        return <div>
            <h1>Hello {this.props.companyName}</h1>
            <Link to="t-and-c">T &amp; C</Link>
        </div>
    }
}

export function mapStateToProps(state) {
    return {
        companyName: state.companyName
    }
};

export const SignUpPage = connect<{}, {}, ISignUpPageProps>(mapStateToProps)(SignUpPageImpl)

TCPage.tsx

import * as React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

export interface ITCPageProps {
    companyName: string;
    terms: string;
}

export class TCPageImpl extends React.PureComponent<ITCPageProps, {}> {
    constructor() {
        super();
    }

    render() {
        return <div>
            <h1>Hello {this.props.companyName}</h1>
            <p>{this.props.terms}</p>
        </div>
    }
}

export function mapStateToProps(state) {
    return {
        companyName: state.companyName,
        terms: state.terms
    }
};

export const TCPage = connect<{}, {}, ITCPageProps>(mapStateToProps)(TCPageImpl)

Answer 1

通常，您<Router> / <Routes>包裹的<Switch> / import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './Containers/App/App'; import { BrowserRouter } from 'react-router-dom' import { Provider } from 'react-redux'; import Store from './store'; const StoreInstance = Store(); ReactDOM.render(( <Provider store={StoreInstance}> <BrowserRouter> <App /> </BrowserRouter> </Provider> ), document.getElementById('root'))组件会包含在index.js文件中。

在我的项目中，我有提供者，像这样包装BrowserRouter组件：

showResults()

不确定你这样做是否只是另一种做法或可能导致问题的方式。

React Router V4 HashRouter不存储历史记录

1 个答案: