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.
Accessing the History Object
Depending on how your application is set up, you might need to import withRouter into your component in order to access the history object’s properties.
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