Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There may be times when you'll need to programmatically change the path in the URL. A common example is changing the path in response to a form submission. In this video, you'll learn how to navigate users to a URL created by the values they type into a form.
Form snippet
<form>
<input type="text" placeholder="Name"/>
<input type="text" placeholder="Topic"/>
<button type="submit">Go!</button>
</form>
Resources
Related courses and workshops
Most of the navigation in your app will be
done using the Link or NavLink component.
0:00
However, there are maybe times when you'll
need to programmatically change the path
0:05
and the URL.
0:09
A common example of this is changing
the path in response to a form submission.
0:10
So in this video, I'll teach you
how to navigate users to a URL
0:14
created by the values
they type into a form.
0:17
I'll show you what we're going to create.
0:20
So there's going to be a form in the home
component, and when you type a name and
0:22
topic into the fields and submit the form,
it will render the featured component.
0:26
And the value submitted for
0:31
the topic and teacher name
will be injected into the URL.
0:33
And just like in the previous video, we'll
use URL parameters to render the submitted
0:37
data inside the featured component.
0:41
So first, in Home.js,
I'll remove the link component we added in
0:45
the previous video and paste a simple form
containing two text fields and a button.
0:50
You can copy this exact snippet from
the teacher's notes of this video.
0:55
And since we're no longer going to
be using the link here in Home.js,
0:58
you can remove the import statement for
link at the top of the file.
1:02
Next, above the render method,
I'll create a function named handleSubmit.
1:05
This function is going to gather the value
of the Name and Topic text field and
1:14
insert them into the URL when
the user submits the form.
1:19
So I'll pass handleSubmit
the event object as an argument.
1:23
Then call e.preventDefault so the form
does not do a real submission on submit.
1:28
Next, let's get the input field values and
store them in variables.
1:36
So we'll name the variables
teacherName and teacherTopic.
1:41
So now we're gonna use refs to access
the value of the input fields.
1:49
In React, refs allow you to reference or
get direct access to a DOM element.
1:55
So in the return method,
let's give both inputs a ref attribute.
2:00
When used on an HTML element, the ref
attribute takes a callback function that
2:07
receives the underlying DOM element as its
argument, in our case, both our inputs.
2:13
So I'll pass input as the callback
argument then I'll return
2:19
this.name = input for
the Name input field.
2:24
And I'll do the same for the Topic field,
returning this.topic = input.
2:30
These two call backs are executed
immediately after the home component
2:38
is mounted to the DOM.
2:42
So, when the inputs are rendered onto the
page, they return a reference that we can
2:44
access with this.name and this.topic.
2:48
So now, up in our handleSubmit function,
to access the Name input field's value,
2:53
we'll set the teacherName
variable to this.name.value.
2:58
And the teacherTopic variable
to this.topic.value.
3:04
So now, to create the path that
will be inserted into the URL,
3:11
I'll combine the values of teacherTopic,
and
3:15
teacherName into a variable named
path using a template literal.
3:17
I'll set the path to
teachers/teacherTopic,
3:22
followed by a forward slash and
the teacherName variable.
3:28
And we'll keep things simple in this
video by using only two URL parameters.
3:37
So this path needs to match the featured
route we declared in the previous video,
3:42
so lets not forget to
go over to App.js and
3:47
update it's path by specifying just
the topic and name parameters only.
3:50
So I replace the fname and
lname parameters with name.
3:54
And over in the featured component,
we'll update
4:00
the name value to simply
match.params.name.
4:05
And now we're ready to redirect
the URL to this path on submit.
4:10
So you learned that React router
passes rendered components information
4:16
about the current path and
URL the route is matching.
4:20
The component also gets passed
a history object that listens for
4:23
changes to the current URL,
keeps tracks of browser history and
4:27
the number of entries
in the history stack.
4:31
And by history stack I mean
previously visited URLs.
4:33
For instance,
4:36
every time a user navigates to a new path
that URL is stored the history stack.
4:37
History is what lets users navigate
your app using the browser's back and
4:43
forward buttons, even refresh the app
while keeping everything in sync.
4:47
So the history object can also be used to
programmatically change the current URL.
4:51
If you inspect the Home component in React
dev tools, you'll see the history prop,
4:58
expand it and you'll see a list of all
the properties and methods of the object.
5:03
So to push a new entry onto the history
stack, we'll use the push method which can
5:08
be accessed inside our home
class with this.props.history.
5:13
So in our handleSubmit function,
we'll push the value of path
5:18
into the history stack with
this.props.history.push and
5:23
then we'll pass push the path variable.
5:31
So now this is going to redirect
the user to the URL stored in path.
5:34
Finally, let's pass React's
onSubmit event to the form.
5:39
And we'll set it to call the handleSubmit
function when the form is submitted with
5:47
this.handleSubmit.
5:52
And with this,
we're referring to the form limit.
5:53
All right, let's try it out.
5:57
Over in our app, I'll type a name and
5:58
a topic and I'll submit the form by either
pressing Enter or clicking the Go button.
6:04
And I see that the topic and
name I've submitted appear in the URL.
6:09
And they are rendered in
the featured component as content.
6:14
Great.
6:17
Let's try one more.
6:19
Congrats, you've just learned a valuable
new skill commonly used in React
6:30
application development.
6:33
React and the tools around it
are constantly evolving, so
6:36
be sure to check the resources
posted in the teacher's notes
6:39
to learn about the latest
in React router and React.
6:42
I've also included links to Treehouse
courses and workshops that will teach you
6:45
advanced React concepts and
useful tools for your projects.
6:48
Remember, we're always here to help.
6:52
So if you have questions about
anything covered in this course,
6:53
feel free to reach out to the Treehouse
staff or other students in the community.
6:56
Thanks everyone and happy coding.
7:00
You need to sign up for Treehouse in order to download course files.
Sign up