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?