Tengo dos botones en mi código, cada uno de los cuales intenta una forma diferente de redirigir, en uno de ellos intento usar <a> y en el otro intento usar la ruta, pero ninguno de ellos parece funcionar.

Aquí está mi código:

Componente DefineDestino.js:

 import React, {useState} from "react" import { Link, BrowserRouter, Routes, Route } from "react-router-dom" import CheckOut from "../CheckOut" export default function DefineDestino(props) { const [initialValue, setValue] = useState(0) const increment = () => { return { type:'counter/increment' } } function estadosReducer(state, action) { if (state === 'Rio de Janeiro' && action.type === 'counter/increment') { setValue(initialValue + 1000) } } return( <div> <h1>Valor: {initialValue}</h1> <button onClick={() => estadosReducer(props.data, increment())}>Efetuar Compra</button> </div> ) }

Aplicación.js:

 import Origem from './components/Origem'; import Destino from './components/Destino' import './styles/App.css'; import React, {useState} from "react" import EstadosOrigem from './components/Origem'; import EstadosDestino from './components/Destino'; import DefineDestino from './components/DefineDestino'; import { Link, BrowserRouter as Router, Routes, Route, Switch } from "react-router-dom"; import CheckOut from './CheckOut'; function App() { return ( <Router> <div className="App"> <div className="mainContent"> <h1>Escolha um destino.</h1> < EstadosOrigem ></EstadosOrigem> < EstadosDestino ></EstadosDestino> <Routes> <Route path="/CheckOut" component={CheckOut}></Route> </Routes> </div> </div> </Router> ); } export default App;

La página que estoy tratando de redirigir a CheckOut.js:

 function CheckOut() { return ( <div className="CheckOut"> <div className="mainContent"> <h1>TESTE.</h1> </div> </div> ); } export default CheckOut;