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

Question

**我使用的是反应路由器(v6)的最新版本，在这里，我从标题组件中的导航栏导航到其他页面。主要的问题是，当我在一个特定的页面上时，我如何去其他的页面(路线)。就像我在游戏页面上，我必须移动到职业页面，然后路径异常发生，所以每次我不得不去其他页面，首先我们必须移动主页，然后我们必须在另一个页面上再次移动。这是我的heroku部署的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;

​

&&这是我的首页

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>