How to redirect to home page on browser refresh in reactjs?

Question

I am building an application with reactjs, react-router-dom and redux (for state management). The application has multiple pages including home, phoneRepair and phoneSelection pages. The user navigates to these above pages and I store their inputs. Hence while the user refresh the page (either by f5 or by pressing button on browser) I want them to redirect to home page.

I have searched for the answer on google and stack overflow. Some of the posts requested to use IndexRoute - but i think it is deprecated.

I have checked the below answer on stackoverflow but it didn't help. redirect to an another web page on browser refresh

my code of 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;

My code of one of the page "Page Selection" is

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);

When user refreshes the page from "phone selection" page I want them to redirect to home page. However currently when user refreshes it stays to same page. Thanks