is this the right way to call a fuction and `<Link to ='/orderCP/orderCompletedCP' /> ` to change route

user_17975157 0
Viewed 19

enter image description here

when i submit the form it wont go to the next route and I'm not sure about if this the right way to call loadUser function that I wrote on the app.js file and I call it here

function OrderCP(props) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [mobileNumber, setMobileNumber] = useState('');
  const [adress, setAddress] = useState('');
  const [city, setCity] = useState('');
  const [size, setSize] = useState('');
  const [quantity, setQuantity] = useState('1');






  function onOrderSubmit ()  {
  fetch('http://localhost:3000/orderCP', {
      method: 'post',
      mode: 'cors',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        firstname: firstName,
        lastname:lastName,
        email: email,
        mobilenumber: mobileNumber,
        adress: adress,
        city: city,
        size:size,
        quantity: quantity

      })
    })
      .then(response => response.json())
      .then(user => {
        if (user.id) {
         return (
          this.props.loadUser(user),
         <Link to ='/orderCP/orderCompletedCP' /> )
        }
      })
  }
react-router reactjs javascript
1 Answers

Issues

  1. This is a function component, so this is simply undefined, just reference the prop argument directly.
  2. The Link is a React component, it needs to be rendered into the DOM and interacted with. You should issue an imperative navigation (vs declarative with rendered components).

Solution

If using the current react-router-dom, version 6, then use the useNavigate hook to access a navigate function, otherwise if still on version 5, use the useHistory hook to access a history object.

import {
  ...
  useHistory,  // RRDv5
  useNavigate, // RRDv6
  ...
} from 'react-router-dom';

...

function OrderCP(props) {
  const history = useHistory();   // RRDv5
  const navigate = useNavigate(); // RRDv6

  ... state declarations ...

  function onOrderSubmit()  {
    fetch('http://localhost:3000/orderCP', {
      method: 'post',
      ...
    })
      .then(response => response.json())
      .then(user => {
        if (user.id) {
          props.loadUser(user);
          history.push('/orderCP/orderCompletedCP'); // RRDv5
          navigate('/orderCP/orderCompletedCP');     // RRDv6
        }
      });
  }

  ...
}
user_86908570
Related