If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.
Can you give a real-world example for when replace
would be used in navigation?
There are many situations where it could be useful. Perhaps you have a nested navigation where you want the browser's back button to return to the previous parent url. -- maybe in a modal, or an image gallery... lot's of possibilities.
Do the corresponding Links and Routes need to be in the same lexical scope? Example:
//index.js
import App from './App'
import Signin from './Signin'
...
<Router>
<div>
<Route path='/' component={App}></Route>
<Route path='/signin' component={Signin}/>
</div>
</Router>
//App.js
Import Header from './Header.js'
...
<div>
<Header/>
</div>
...
//Header.js
<nav>
<ul>
<Link to='/signin'>Sign in</Link>
</ul>
</nav>
I had tried making a route change to the route /signin
from a nested component, and although it would go to the route within the "to" parameter, it wouldn't render the component until I refreshed the page. Does anyone know if this is an issue or a feature?
Without a detailed review of your code it could be multiple issues. However, as you've presented it here App & Signin should both render at /signin. As just a random thing to try - <Route exact path='/' component={App}></Route>
to see if the two components are conflicting somehow.
Is it possible to have several routes on one page, like in a single scrolling webpage that has each section take up 100vh of the users window?