Блог

У меня возникли проблемы с навигацией между экранами с помощью react-router-dom. Что я пытаюсь сделать, так это то, что после завершения действия я хочу перейти на другой экран. Извините за вопрос новичка, но я впервые работаю с react.

если вы используете перехваты, используйте перехват истории использования react-router domshttps://reactrouter.com/web/api/Hooks

например:

 import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
  

попробуйте использовать эти команды

 this.props.history.push("/Home")// use this for class component 
props.history.push("/Home")// functional component  (and pass props to the component)
  

Пример:

 function LoginComponent(props) {

  const handleClick=()=> {
    props.history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
  

и убедитесь, что вы написали маршруты в app.js

 import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./components/Home";

        <Router>
          <Route path="/home" component={Home} />
        </Router>