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

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

我在google和stack overflow上搜索了答案。 有些帖子要求使用IndexRoute，但我认为这是不推荐的

我已经检查了下面关于stackoverflow的答案，但没有帮助。

我的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;

从“react router dom”导入{BrowserRouter，Switch，Route}；
从“/components/layout/Navbar”导入导航栏；
从“/components/Main/Main”导入Main；
从“/components/Floating/PhoneRepair”导入PhoneRepair；
从“/components/Floating/PhoneSelection”导入PhoneSelection；
从“/components/Floating/PhoneColorSelection”导入PhoneColorSelection；
类应用程序扩展组件{
render（）{
返回(
{/*  */}
{/*  */}
{/*  */}
);
}
}
导出默认应用程序；

其中一个页面“页面选择”的代码为

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“react router dom”导入{Link}；
从“../../store/actions/createDetails”导入{createModel}；
类PhoneSelection扩展了组件{
建造师（道具）{
超级（道具）
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（）{
返回(
这是以前选择的公司的电话列表。
{this.props.companyName.phoneReducers.project.map（（phone）=>{
if（phone.id==this.props.match.params.brand）{
返回phone.phones.map（（p，key）=>(
此.handleClick（键）}>
{this.phoneModel[key]=ref}}>{p.phoneName}
));
}
})}
);
}
}
常量mapStatetoProps=状态=>{
返回{
公司名称：州
};
};
const mapDispatchToProps=调度=>{
返回{
createModel:details=>dispatch（createModel（details））
};
};
导出默认连接（mapStatetoProps、mapDispatchToProps）（电话选择）；

---

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

澄清，当您刷新时，您将失去您的状态，因此您需要返回主页重新开始该过程，对吗？您可以解决在

渲染中返回
的问题，如果您需要的一些道具没有设置或empty@SrThompson非常感谢。我也会试试。
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);