how to render two components based on one url

gistfile1.txt

// hey, I wanna show Home Component & Modal Component when url is /edit-profile

// method one
<Route path="/" component={HomePage} />
<Route path="/edit-profile" component={EditModal} />

// this will work, but when I adding another route&component like below
// when  go to '/about', both Home and About will show up, I assume these are two different pages
<Route path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/edit-profile" component={EditModal} />

//method two

<Route path="/" exact component={HomePage} />
<Route path="/edit-profile" exact render{() => 
  <HomePage><EditModal/></HomePage>
} />

// this also will work, but when go to /edit-profile link, it will cause the HomePage component re-render

// So what's the best way to handle this scenario?