Adding React-Router

This next video shows how to define your routes using React-Router.

You will need to install React-Router from the Clutch Cloud components to complete this section.

The video briefly explains the updated (6.0.9) React-Router components and how they work with each other to create routing in your project. For a deeper dive check out React-Router's documentation.

In the video, we add a Form component from React-Router that uses a post method set on the method property of the Form.

When the user submits the form, React Router will match the action to the app's routes and call the with the serialized FormData. When the action completes, all of the loader data on the page will automatically revalidate to keep your UI in sync with your data.

Here is the code snippet used in the action prop of the signup route. Copy and paste this into the signup route's action prop.

export default async ({ params, request }) => {
  let formData = await request.formData();
  let email = formData.get('email');
  let password = formData.get('password');
  console.log('form data', {email, password});
};

The code snippet above uses the request.formData() method and sets it to the formData variable.
Then a get method is performed on the formData to abstract the email and password and set it to their own individual variables.
The console.log will log any data entered in the form to the console/instruments panel.

📘

Links

Link to the Clutch Project: https://app.clutch.io/project/631f8a2f45fd6fca056cc44e?workspace=215_164