React Router > React Save Button navigates with React Router useNavigate

Adding a React Save Button to navigate with React Router

Okay, back to learning about React Router! So, sometimes we want to use navigation features of a link in some other context aside from clicking on links. In our app, we want to navigate away after saving our Mission data.

We'll use the useNavigate hook from React router. Similiarly to how we pass a path to the to prop of a Link, here we'll pass the path directly into the navigate function returned from useNavigate. You can see useNavigate being called at the beginning of NewMission, and then the navigate function called in the saveMission function.

The result is we navigate away after clicking save. We don't actually save the data entered in title and description, but we'll work on that in our Redux module.

Lesson 14/26

import styled from "styled-components";

const StyledInput = styled.input`
  font-size: 32px;
  padding: 4px;
  border: 0px;
  outline: 0px;
  font-family: inherit;
  width: 100%;
  background: transparent;
`;

export const TextArea = styled.textarea`
  font-size: 22px; 
  padding: 4px;
  border: 0px;
  outline: 0px;
  font-family: inherit;
  background: transparent;
  width: 100%;
  height: 100px;
  border: 1px solid silver;
`;

export default StyledInput;

Open Sandbox