作为 Switch Case 的结果，我如何使用 React Router Dom 导航到新页面？

Question

Essentially when a form is submitted I want the page to navigate to a different page as a result from a switch statement.

switch (real_input_value()) {
  case 'Help':
    console.log('Displaying list of available commands')
    user_input_resultsHelp()
    <Link to="/"/>
    break;
}

All the components in react-router-dom have to go into the html area and not the javascript area, so how do I navigate to a new page using javascript inside of this switch statement?

Component code:

const App = () => {

  const input_command_logic = (e) => {
    e.preventDefault();
    switch (real_input_value()) {
      case 'Help':
        console.log('Displaying list of available commands')
        user_input_resultsHelp()
        <Link to="/"/>
        break;
  }

  return()

Answer 1

Since the switch statement is a form element's onSubmit callback it will need to issue an imperative navigation action. For this import and use the useNavigate hook to access the navigate function in the component, and issue the navigation action in the handler.

Example:

import { ..., useNavigate } from 'react-router-dom';

...

const MyComponent = () => {
  const navigate = useNavigate();

  ...

  submitHandler = event => {
    event.preventDefault();

    ...

    switch (real_input_value()) {
      ...

      case 'Help':
        console.log('Displaying list of available commands')
        user_input_resultsHelp()
        navigate("/");
        break;

      ...
    }

  };

  ...