React路由如何到达我想要的页面

Question

所以，我有一个使用 react-route 的代码，我有几页，但是当我到达其中一个时，我无法输入其他页面，因为 URL 得到卡在实际页面中，有什么办法可以解决这个问题？当我从应用程序页面转到 CheckOut 页面时，我的 url 变成这样：localhost:3000/CheckOut，当我尝试转到 Comprar 页面时，它变成这样：localhost:3000/CheckOut/Comprar，这是行不通的，当我像这样手动编写 url 时：localhost:3000/Comprar，它确实有效，我想知道我怎样才能到达结帐页面，然后转到 Comprar 页面，URL 应该是这样的：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;

Answer 1

试试这个方法，在 React v6 中我们必须使用 useNavigate

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

Answer 2

使用 root 相对链接与 relative 链接。 <Link to={"/Comprar"}>Comprar passagem</Link>。 https://mor10.com/html-basics-hyperlink-syntax-absolute-relative-and-root-relative/

React路由如何到达我想要的页面

React route how to get to the page i want

javascript

routes

reactjs