Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Router v6 Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Navigating Routes Programmatically

7:32 with Laura Coronel

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>

VS Code Shortcuts Used

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Most of the navigation in your app will be done using the Link or NavLink component. 0:00
    However, there may be times when you'll need to programmatically 0:06
    change the path in the URL. 0:11
    A common example of this is changing the path in response to a form submission. 0:13
    In this video, I'll teach you how to navigate users to 0:19
    a URL created by the values they type into a form. 0:24
    I'll show you what we're going to create. 0:28
    So there's going to be a form in the home component. 0:31
    When you type a name and topic into the fields and 0:34
    submit the form, it will render the featured component. 0:38
    The value submitted for the topic and 0:42
    teachers name will be injected into the URL. 0:45
    And just like in the previous video, we'll use URL parameters to 0:49
    render the submitted data inside the featured component. 0:53
    So first, in Home.js, I'll remove the Link component we added in the previous video, 0:58
    and paste a simple form containing two text fields and a button. 1:05
    And to quickly fix the formatting, 1:10
    I'll use the shortcut Option + Shift + F in Visual Studio Code. 1:13
    You can copy this exact snippet from the Teacher's Notes of the video. 1:18
    Since we're no longer going to be using Link here in Home.js, 1:23
    you can remove the import statement for Link at the top of the file. 1:28
    Next, above the return statement, I'll create a function named handleSubmit. 1:33
    This function is going to gather the values of the name and topic text fields, 1:40
    and insert them into the URL when a user submits the form. 1:47
    So I'll pass handleSubmit, the event object, as an argument. 1:52
    Then call e.preventDefault() so 1:57
    the form does not do a real submission on Submit. 2:01
    Next, let's gather the input field values and store them in variables. 2:06
    So we'll name the variable teacherName and teacherTopic. 2:12
    So now we're going to use refs to access the value of the input fields. 2:19
    In React, Refs allow you to reference or get direct access to a DOM element. 2:25
    In the input tags, let's give both inputs a ref attribute 2:33
    When used on an HTML element, 2:39
    the ref attribute takes a callback function, or the useRef hook. 2:42
    So at the top, let's import the useRef hook. 2:48
    At the top of the Home component, 2:52
    let's create two Ref hooks, one for each input tag. 2:55
    Since the first input receives the name of a teacher, 3:00
    we'll call this ref name and set it equal to useRef(). 3:05
    The second input receives the topic the teacher teaches, 3:10
    so we'll call this ref topic, and set it equal to useRef(). 3:15
    Now, let's pass name to the first input ref and topic to the second ref. 3:21
    React will set our refs.current property to 3:28
    the corresponding DOM node whenever the input value changes. 3:31
    In our handleSubmit function, to access the Name input fields value, 3:37
    we'll set the teacherName variable to name.current.value, and 3:44
    the teacherTopic variable to topic.current.value. 3:50
    So now, to create the path that will be inserted into the URL, 3:56
    I'll combine the values of teacherTopic and 4:01
    teacherName into a variable name path, using a template literal. 4:05
    We'll set the path to teachers/teacherTopic, 4:11
    followed by a /, and teacherName variable. 4:15
    We'll keep things simple in this video by using only two URL parameters. 4:23
    So this path needs to match the featured route we declared in the previous video. 4:29
    So let's not forget to go over to app.js and 4:35
    update its path by specifying the topic. 4:39
    And name parameters only. 4:42
    So let's replace the fname and lname parameters with name. 4:46
    And over in the Featured component, we'll update the useParams 4:53
    hook to return name and delete the name variable we created. 4:58
    Now, we're ready to navigate the URL to this path on submit. 5:04
    Earlier, we learned about React routers Navigate component, 5:09
    and use it to redirect users to a new URL. 5:14
    React Router also provides a useNavigate hook to do the same and 5:17
    navigate the user to a new URL. 5:23
    We can ignore this warning, because our app isn't using loaders nor actions. 5:26
    Let's import useNavigate from react-router-dom. 5:33
    The useNavigate hook returns a function that lets us navigate programmatically. 5:38
    We'll store the function useNavigate returns, to a variable named navigate. 5:46
    We'll call the navigate function in our handleSubmit function. 5:52
    The Navigate function accepts two arguments. 5:58
    The first being the URL to navigate to. 6:01
    The second is optional, where you can send state, and 6:04
    you can tell Navigate to replace the current entry in the history stack 6:08
    instead of adding, like we did with the Navigate component. 6:13
    But for this, we won't include the replace, 6:17
    since we want to keep the /home path in the History stack. 6:20
    You can also pass Navigate the delta you want to go in the History stack. 6:25
    For example, if we pass navigate -1, 6:30
    this is equivalent to hitting the Back button in a browser. 6:34
    To navigate to the path we created, we'll pass path to the Navigate function. 6:39
    Finally, let's pass React's onSubmit event to the form, and 6:46
    we'll set it to call the handleSubmit function when the form is submitted. 6:50
    All right, let's save and try it out. 6:56
    Over in our app, I'll type a name and topic and 7:01
    submit the form by either pressing Enter, or clicking the Go button. 7:05
    We can see that the topic and name I submitted appear in the URL, 7:10
    and they're rendered to the Featured component as content. 7:14
    Great! 7:18
    Let's try one more. 7:20
    And my name and topic appears in the URL and in the Featured component. 7:24
    Great job! 7:30

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up