Most of the navigation in your app will be done using the Link or NavLink component.

However, there are maybe times when you'll need to programmatically change the path

and the URL.

A common example of this is changing the path in response to a form submission.

So in this video, I'll teach you how to navigate users to a URL

created by the values they type into a form.

I'll show you what we're going to create.

So there's going to be a form in the home component, and when you type a name and

topic into the fields and submit the form, it will render the featured component.

And the value submitted for

the topic and teacher name will be injected into the URL.

And just like in the previous video, we'll use URL parameters to render the submitted

data inside the featured component.

So first, in Home.js, I'll remove the link component we added in

the previous video and paste a simple form containing two text fields and a button.

You can copy this exact snippet from the teacher's notes of this video.

And since we're no longer going to be using the link here in Home.js,

you can remove the import statement for link at the top of the file.

Next, above the render method, I'll create a function named handleSubmit.

This function is going to gather the value of the Name and Topic text field and

insert them into the URL when the user submits the form.

So I'll pass handleSubmit the event object as an argument.

Then call e.preventDefault so the form does not do a real submission on submit.

Next, let's get the input field values and store them in variables.

So we'll name the variables teacherName and teacherTopic.

So now we're gonna use refs to access the value of the input fields.

In React, refs allow you to reference or get direct access to a DOM element.

So in the return method, let's give both inputs a ref attribute.

When used on an HTML element, the ref attribute takes a callback function that

receives the underlying DOM element as its argument, in our case, both our inputs.

So I'll pass input as the callback argument then I'll return

this.name = input for the Name input field.

And I'll do the same for the Topic field, returning this.topic = input.

These two call backs are executed immediately after the home component

is mounted to the DOM.

So, when the inputs are rendered onto the page, they return a reference that we can

access with this.name and this.topic.

So now, up in our handleSubmit function, to access the Name input field's value,

we'll set the teacherName variable to this.name.value.

And the teacherTopic variable to this.topic.value.

So now, to create the path that will be inserted into the URL,

I'll combine the values of teacherTopic, and

teacherName into a variable named path using a template literal.

I'll set the path to teachers/teacherTopic,

followed by a forward slash and the teacherName variable.

And we'll keep things simple in this video by using only two URL parameters.

So this path needs to match the featured route we declared in the previous video,

so lets not forget to go over to App.js and

update it's path by specifying just the topic and name parameters only.

So I replace the fname and lname parameters with name.

And over in the featured component, we'll update

the name value to simply match.params.name.

And now we're ready to redirect the URL to this path on submit.

So you learned that React router passes rendered components information

about the current path and URL the route is matching.

The component also gets passed a history object that listens for

changes to the current URL, keeps tracks of browser history and

the number of entries in the history stack.

And by history stack I mean previously visited URLs.

For instance,

every time a user navigates to a new path that URL is stored the history stack.

History is what lets users navigate your app using the browser's back and

forward buttons, even refresh the app while keeping everything in sync.

So the history object can also be used to programmatically change the current URL.

If you inspect the Home component in React dev tools, you'll see the history prop,

expand it and you'll see a list of all the properties and methods of the object.

So to push a new entry onto the history stack, we'll use the push method which can

be accessed inside our home class with this.props.history.

So in our handleSubmit function, we'll push the value of path

into the history stack with this.props.history.push and

then we'll pass push the path variable.

So now this is going to redirect the user to the URL stored in path.

Finally, let's pass React's onSubmit event to the form.

And we'll set it to call the handleSubmit function when the form is submitted with

this.handleSubmit.

And with this, we're referring to the form limit.

All right, let's try it out.

Over in our app, I'll type a name and

a topic and I'll submit the form by either pressing Enter or clicking the Go button.

And I see that the topic and name I've submitted appear in the URL.

And they are rendered in the featured component as content.

Great.

Let's try one more.

Congrats, you've just learned a valuable new skill commonly used in React

application development.

React and the tools around it are constantly evolving, so

be sure to check the resources posted in the teacher's notes

to learn about the latest in React router and React.

I've also included links to Treehouse courses and workshops that will teach you

advanced React concepts and useful tools for your projects.

Remember, we're always here to help.

So if you have questions about anything covered in this course,

feel free to reach out to the Treehouse staff or other students in the community.

Thanks everyone and happy coding.