What is the core idea that react components rely on routing?

found that my component does not rely on routing. After the page is refreshed, only a single component is displayed without a parent component

function RouterConfig({ history }) {
  return(
  <Router history={history}>
      <Switch>
      <Route exact path="/" component={lsPage}/>
      <Route exact path="/layout" component={layout} />
      <Route exact path="/404" component={notFound}/>
      <Route  exact path="/login" component={loginPage} />
      <Route  exact path="/sign" component={signUpPage} />
      <Route  exact path="/personal" component={personPage} />
      <Route  exact path="/find" component={findPage} />
      <Route exact  path="/mood" component={moodPage} />
      <Route  exact path="/display" component={displayPage}/>
      <Route  exact path="/userset" component={setPage}/>
      <Route  exact path="/pwdchange" component={pwdchangePage}/>
      </Switch>
  </Router>
  )
} 
export default RouterConfig;
render(){
        return(
            <div className={style.wrap}>
                <Router>
                    <Layout style={{height:"100%",padding: "24px 0"}}>
                        <Header className={style.header}>
                        </Header>
                        <Content style={{ padding: "0 50px",minHeight: 480  }}>
                            <div className={style.leftSide}>
                                <Personal/>
                                <Nav/>
                            </div>
                            <div className={style.rightSide}>
                                <Route path="/layout" exact component={welcomeP}/>
                                <Route path="/personal"  component={personal}/>
                                <Route path="/find"  component={find}/>
                                <Route path="/mood"  component={mood}/>
                                <Route path="/display"  component={display}/>
                                <Route path="/userset"  component={userset}/>
                                <Route path="/pwdchange"  component={pwdchange}/>
                            </div>
                        </Content>
                        <Footer style={{ textAlign: "center",padding:"0"}}>
                            

<a className={style.me} onClick={this.handleExit}></a>

</Footer> </Layout> </Router> </div> ) }
After the

page is refreshed, the url localhost:8000/display page has only display components, and everything else is gone. Excuse me, what"s wrong?

Apr.07,2021

that's how you define it in the RouterConfig file.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b32a93-2be15.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b32a93-2be15.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?