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;
