当我在某条路线上时，我如何导航到不同的路线

Question

**我使用的是最新版本的 react-router (v6)，我从 header 组件中的导航栏导航到其他页面。主要问题是，当我在某个页面上时，如何转到其他页面（路由）。就像我在游戏页面，我必须前进到职业页面，然后出现路由异常，所以每次我必须去其他页面，首先我们必须移动主页，然后我们必须移动再次在另一页上。这是我部署的 heroku link 的 reactjs 应用程序：plomx.herokuapp.com
&& 这是我的代码 app.js

import './App.css';
import Games from './Games'
import GetYourGameOnBockChain from './GetYourGameOnBockChain'
import Careers from './Careers'
import NftMarketplace from './NftMarketplace'
import ErrorPage from './ErrorPage'
import { Routes, Route } from "react-router-dom"
import Metaverse from './Metaverse';
import PlomXHome from './PlomXHome';
function App() {
  return (
    <div className="App">
      
        <Routes>
          <Route path='/' element={<PlomXHome/>}/>
          <Route path='games' element={<Games />} />
          <Route path='nftmarketplace' element={<NftMarketplace/>} />
          <Route path='metaverse' element={<Metaverse/>}/>
          <Route path='getyourgameon' element={<GetYourGameOnBockChain />} />
          <Route path='careers' element={<Careers />} />
          <Route path='*' element={<ErrorPage />} />
        </Routes>
        
    </div>
  );
}

export default App;

&& 这是我的 header 页面

import React from 'react'
import './Header.css'

import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StorefrontIcon from '@mui/icons-material/Storefront';
import GamepadIcon from '@mui/icons-material/Gamepad';
import ChildCareIcon from '@mui/icons-material/ChildCare';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import Box from '@mui/material/Box';
import { useNavigate } from 'react-router-dom';

export const Header = () => {
    const navigate = useNavigate()
    return (
        // <div className='header'>
        <div>
            {/* <div className='plomxName'>PlomX</div> */}
            {/* <Box sx={{ flexGrow: 1 }}> */}
            <AppBar style={{ background: 'black', height: '109px' }}>
                <Grid container justifyContent="center" spacing={2}>
                    <div className='plomxName'>PlomX</div>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('games')} sx={{ color: "white" }}><SportsEsportsIcon sx={{ color: 'white' }} />Games</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('nftmarketplace')} sx={{ color: "white" }}><StorefrontIcon sx={{ color: 'white' }} />NFT Marketplace</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('metaverse')} sx={{ color: "white" }}><AcUnitIcon sx={{ color: 'white' }} />MetaVerse</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('getyourgameon')} sx={{ color: "white" }}><GamepadIcon sx={{ color: 'white' }} />Get your game on Blockchain</Button></Grid>
                    <Grid item sx={{ marginTop: 3 }}><Button onClick={() => navigate('careers')} sx={{ color: "white" }}><ChildCareIcon sx={{ color: 'white' }} />Careers</Button></Grid>
                </Grid>
            </AppBar>
            {/* </Box> */}
        </div>
    )
}

Answer 1

据我所知，您所有的导航操作都使用了相对链接。我相信您描述的问题出现在其中一个页面上，例如“/games”并单击菜单按钮 navigate("metaverse")，结果是您相对导航到 "/games/metaverse" 而不是绝对导航至 "/metaverse.

相对路径和绝对路径的区别在于前导斜杠 "/"。绝对路径以 "/".

开头

更新您的按钮以使用绝对路径。

<AppBar style={{ background: "black", height: "109px" }}>
  <Grid container justifyContent="center" spacing={2}>
    <div className="plomxName">PlomX</div>
    <Grid item sx={{ marginTop: 3 }}>
      <Button onClick={() => navigate("/games")} sx={{ color: "white" }}>
        <SportsEsportsIcon sx={{ color: "white" }} />
        Games
      </Button>
    </Grid>
    <Grid item sx={{ marginTop: 3 }}>
      <Button
        onClick={() => navigate("/nftmarketplace")}
        sx={{ color: "white" }}
      >
        <StorefrontIcon sx={{ color: "white" }} />
        NFT Marketplace
      </Button>
    </Grid>
    <Grid item sx={{ marginTop: 3 }}>
      <Button
        onClick={() => navigate("/metaverse")}
        sx={{ color: "white" }}
      >
        <AcUnitIcon sx={{ color: "white" }} />
        MetaVerse
      </Button>
    </Grid>
    <Grid item sx={{ marginTop: 3 }}>
      <Button
        onClick={() => navigate("/getyourgameon")}
        sx={{ color: "white" }}
      >
        <GamepadIcon sx={{ color: "white" }} />
        Get your game on Blockchain
      </Button>
    </Grid>
    <Grid item sx={{ marginTop: 3 }}>
      <Button
        onClick={() => navigate("/careers")}
        sx={{ color: "white" }}
      >
        <ChildCareIcon sx={{ color: "white" }} />
        Careers
      </Button>
    </Grid>
  </Grid>
</AppBar>

同样，路由路径的工作方式相同。你在这里看不到问题，因为它们都是 "/" 的相对值，但如果你愿意，你可以更明确一点。

<Routes>
  <Route path='/' element={<PlomXHome/>}/>
  <Route path='/games' element={<Games />} />
  <Route path='/nftmarketplace' element={<NftMarketplace/>} />
  <Route path='/metaverse' element={<Metaverse/>}/>
  <Route path='/getyourgameon' element={<GetYourGameOnBockChain />} />
  <Route path='/careers' element={<Careers />} />
  <Route path='*' element={<ErrorPage />} />
</Routes>

当我在某条路线上时，我如何导航到不同的路线

How I navigate to the different routes when I am on the certain Route

reactjs

react-router

react-router-dom