所以，我有一個使用 react-route 的代碼，我有幾個頁面，但是當我到達其中一個頁面時，我無法輸入其他頁面，因為 URL 卡在實際頁面中，有沒有解決這個問題的方法？當我從應用程式頁面轉到 CheckOut 頁面時，我的 url 是這樣的：localhost:3000/CheckOut，當我嘗試移動到 Comprar 頁面時，它是這樣的：localhost:3000/CheckOut/Comprar，其中不作業，當我手動撰寫這樣的 URL 時：localhost:3000/Comprar，它確實作業，我想知道如何進入結帳頁面，然后轉到 Comprar 頁面，URL 應該看起來像這樣：本地主機：3000/Comprar。
應用程式.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>
);
}
定義Destino.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>
)
}
結帳.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;
結帳.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;
比較.js：
import '../styles/App.css';
function Comprar(props) {
return (
<div className="Compra">
<h1>Compra efetuada! Boa viagem :)</h1>
</div>
);
}
export default Comprar;
uj5u.com熱心網友回復：
使用根相對 vs相對鏈接。<Link to={"/Comprar"}>Comprar passagem</Link>.
https://mor10.com/html-basics-hyperlink-syntax-absolute-relative-and-root-relative/
uj5u.com熱心網友回復：
試試這個方法，在 react v6 中我們必須使用 useNavigate
import { useNavigate } from 'react-router-dom';
function YourApp() {
const navigate = useNavigate();
return (
<>
<button onClick={() => navigate(-1)}>go back</button>
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370880.html
標籤：javascript 反应 路线