So, i have a code that is using react-route, and i have a few pages, but when i get to one of them, i can't enter the others, since the URL gets stuck in the actual page, is there any way to solve this? When i go from the app page, to the CheckOut page, my url gets like this: localhost:3000/CheckOut, and when i try to move to the Comprar page, its gets like this: localhost:3000/CheckOut/Comprar, which is not working, and when i manually write the url like this: localhost:3000/Comprar, it do work, i want to know how can i get to the Checkout page, and then go to the Comprar page, and the URL should look like this: localhost:3000/Comprar.

App.js:

import './styles/App.css';
import React, {useState} from "react"
import DefineDestino from './components/DefineDestino';
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import CheckOut from './pages/CheckOut';
import Comprar from './pages/Comprar';

function App() {
  const [estadoOrigem, setEstadoOrigem] = useState()
  const [estadoDestino, setEstadoDestino] = useState()
  return (
      <Router>
        <div className="App">
          <div className="mainContent">
            <h1>Escolha um destino.</h1>
              <div className="estados">
                <h1>Local de Origem</h1>
                <select value={estadoOrigem} onChange={e => setEstadoOrigem(e.target.value)}>
                    <option>Rio de Janeiro</option>
                    <option>São Paulo</option>
                    <option>Minas Gerais</option>
                    <option>Brasília</option>
                    <option>Pará</option>
                    <option>Ceará</option>
                    <option>Paraná</option>
                    <option>Mato Grosso</option>
                </select>
            </div>
            <div className="estados">
              <h1>Destino Final</h1>
              <select className="select" value={estadoDestino} onChange={e => setEstadoDestino(e.target.value)}>
                  <option>Rio de Janeiro</option>
                  <option>São Paulo</option>
                  <option>Minas Gerais</option>
                  <option>Brasília</option>
                  <option>Pará</option>
                  <option>Ceará</option>
                  <option>Paraná</option>
                  <option>Mato Grosso</option>
              </select>
          </div>
              < DefineDestino origem={estadoOrigem} destino={estadoDestino}></DefineDestino>
              <Routes>
                <Route path="/CheckOut" element={<CheckOut />}></Route>
                <Route path="/Comprar" element={<Comprar />}></Route>
              </Routes>
          </div>
        </div>
      </Router>
    );
}

DefineDestino.js:

import React, {useState} from "react"
import { Link } from "react-router-dom";
import '../styles/DefineDestino.css'

export default function DefineDestino(props) {
    const [initialValue, setValue] = useState(0)
    const dados = {
        locais: [
            {
                estado: 'Rio de Janeiro', 
                aeroportos: 'Santos Dumont', 
                valor: 3000
            },
            {
                estado: 'São Paulo',
                aeroportos: 'Aeroporto Internacional de São Paulo-Guarulhos', 
                valor: 2500
            },
            {
                estado: 'Pará',
                aeroportos: 'Aeroporto Internacional de Belém', 
                valor: 1500
            },
            {
                estado: 'Minas Gerais',
                aeroportos: 'Aeroporto Internacional de Belo Horizonte-Confins', 
                valor: 1750
            },
            {
                estado: 'Brasília',
                aeroportos: 'Aeroporto Internacional de Brasília', 
                valor: 1600
            },
            {
                estado: 'Mato Grosso',
                aeroportos: 'Aeroporto Internacional de Cuiabá', 
                valor: 1350
            },
            {
                estado: 'Paraná',
                aeroportos: 'Aeroporto Internacional de Curitiba', 
                valor: 1200
            },
            {
                estado: 'Ceará',
                aeroportos: 'Aeroporto Internacional de Fortaleza', 
                valor: 1200
            }
        ]
    }
    
    var local = props.destino

    const increment = () => {
        return {
            type:'increment'
        }
    }

    function estadosReducer(state, action) {
        if (action.type === 'increment') {
            var item
            for (item of dados.locais) {
                if (item.estado === local) {
                    switch(local) {
                        case 'Rio de Janeiro':
                            setValue(initialValue   item.valor)
                            break
                        case 'São Paulo':
                            setValue(initialValue   item.valor)
                            break
                        case 'Pará':
                            setValue(initialValue   item.valor)
                            break
                        case 'Minas Gerais':
                            setValue(initialValue   item.valor)
                            break
                        case 'Brasília':
                            setValue(initialValue   item.valor)
                            break
                        case 'Mato Grosso':
                            setValue(initialValue   item.valor)
                            break
                        case 'Paraná':
                            setValue(initialValue   item.valor)
                            break
                        case 'Ceará':
                            setValue(initialValue   item.valor)
                            break
                    }
                }
            }
        }
    }

    return(
        <div>
            <h1>De: {props.origem}</h1>
            <h1>Para: {props.destino}</h1>
            <h1>Valor: {initialValue}</h1>
            <button onClick={() => estadosReducer(initialValue, increment())}><Link to={"CheckOut"}>Realizar Checkout</Link></button>
        </div>
    )
}

CheckOut.js:

import '../styles/App.css';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Comprar from './Comprar';

function CheckOut(props) {
  return (
      <div className="CheckOut">
          <h1>Efetuar compra?</h1>
          <button><Link to={"Comprar"}>Comprar passagem</Link></button>
      </div>
  );
}

export default CheckOut;

CheckOut.js:

import '../styles/App.css';
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Comprar from './Comprar';

function CheckOut(props) {
  return (
      <div className="CheckOut">
          <h1>Efetuar compra?</h1>
          <button><Link to={"Comprar"}>Comprar passagem</Link></button>
      </div>
  );
}

export default CheckOut;

Comprar.js:

import '../styles/App.css';

function Comprar(props) {
  return (
    <div className="Compra">
        <h1>Compra efetuada! Boa viagem :)</h1>
    </div>
  );
}

export default Comprar;

CodePudding user response：

Use root relative vs relative links. <Link to={"/Comprar"}>Comprar passagem</Link>. https://mor10.com/html-basics-hyperlink-syntax-absolute-relative-and-root-relative/

CodePudding user response：

Try this approach, in react v6 we have to use useNavigate

import { useNavigate } from 'react-router-dom';
    
    function YourApp() {
      const navigate = useNavigate();
    
      return (
        <>
          <button onClick={() => navigate(-1)}>go back</button>
        </>
      );
    }