Use the React Router v4 Link Component for Navigation Between Routes
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.
[00:00] We can create navigation elements for a router by bringing in the <Link> component from the React Router library. You can see here I've got three paths -- one for Home, About, and Contact. We're here on the Home path. If I go to /about, we get our About, and likewise for Contact.
[00:19] To use the <Link> component, I'm going to go ahead and create a new component here called <Links>. I'm going to wrap everything up in a <nav> tag. We're going to go ahead and put our <Link> component on the page. This works a lot like an anchor tag with the exception that rather than an href we have a to prop.
[00:37] I'm going to say to/, and then inside of that component I'm going to go ahead and give it some text that says Home. We can add our <Links> component to our app component. Now we've got our <Link> component. We click on Home, and we've got our Home component.
[00:55] I'm going to go ahead and add another one of these for our About page. This time, rater than passing in a string, we're going to interpolate an object. There's a few things we can do here, but the to prop becomes pathname, so we'll set this to /about, save that. Now we've got an About link.
[01:15] We're going to go ahead and add one more for our Contact page, save that. Now we've got our three links -- Home, About, and Contact.
[01:27] One other thing we can do here is called replace. This gives us a little control over how we're managing our browser history. By using replace here, if I go to Home and then About, and I click Back, it's going to take me to Home.
[01:45] If I go to Home, About, and then Contact, you might think that it's going to take me to About, but what we've done by adding this replace modifier is we've replaced the previous URL with the new URL. When I hit Back, it's going to go all the way to Home.
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?
Can you give a real-world example for when
replacewould be used in navigation?