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