如何在reactjs中在浏览器刷新时重定向到主页？

Question

我正在使用reactjs，react-router-dom和redux（用于状态管理）构建应用程序。该应用程序有多个页面，包括主页，phoneRepair和phoneSelection页面。用户导航到以上这些页面，我存储了他们的输入。因此，当用户刷新页面时（通过f5或通过按浏览器上的按钮），我希望他们重定向到主页。

我在google上搜索了答案，并且堆栈溢出。 一些帖子要求使用IndexRoute-但我认为它已被弃用。

我已经检查了以下关于stackoverflow的答案，但没有帮助。 redirect to an another web page on browser refresh

我的App.js代码

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Main from "./components/Main/Main";
import PhoneRepair from "./components/Floating/PhoneRepair";
import PhoneSelection from "./components/Floating/PhoneSelection";
import PhoneColorSelection from "./components/Floating/PhoneColorSelection";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/phoneRepair/:brand/:color" component={PhoneColorSelection} />
            <Route path="/phoneRepair/:brand" component={PhoneSelection} />
            <Route path="/phoneRepair" component={PhoneRepair} />
            {/* <Route path='/signin' component={SignIn} /> */}
            {/* <Route path='/signup' component={SignUp} /> */}
            {/* <Route path='/create' component={CreateProject} /> */}
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

“页面选择”页面之一的代码是

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createModel } from "../../store/actions/createDetails";
class PhoneSelection extends Component {
  constructor(props){
    super(props)
    this.phoneModel = [];
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = e => {
    const model = this.phoneModel[e].textContent;
    console.log(this.phoneModel);
    this.props.createModel(model)
  };

  render() {
    return (
      <div className="conatiner">
        <div>This is the list of phones of company previously selected.</div>
        <div className="details">
          {this.props.companyName.phoneReducers.project.map((phone) => {
            if (phone.id === this.props.match.params.brand) {
              return phone.phones.map((p,key) => (
                <Link to={`/phoneRepair/${phone.id}/${p.alias}`} key={key} onClick={() => this.handleClick(key)}>
                  <div className="details-phoneRepair" ref={ref => {this.phoneModel[key] = ref}}>{p.phoneName}</div>
                </Link>
              ));
            }
          })}
        </div>
      </div>
    );
  }
}

const mapStatetoProps = state => {
  return {
    companyName: state
  };
};

const mapDispatchToProps = dispatch => {
  return {
    createModel: details => dispatch(createModel(details))
  };
};

export default connect(mapStatetoProps, mapDispatchToProps)(PhoneSelection);

当用户从“电话选择”页面刷新页面时，我希望他们重定向到主页。但是当前，当用户刷新时，它停留在同一页面上。谢谢