在我的新页面重定向中删除导航栏和样式.React js路线

Question

我试着点击一个按钮，重定向到我的游戏小行星页面。问题是，在我目前的结构中，我有导航栏和页脚，以及添加到新页面上的样式如何在空白的加载项页面上重定向？我和你分享我的App.js页面，在那里我有我的路线。

import './style.css';
import './App.css';
const App = () => {
return (
<Router>
<Preloader load={load} />
<div className="App" id={load ? 'no-scroll' : 'scroll'}>
<Navbar />
<ScrollToTop />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/resume" component={Resume} />
<Route path="/game" component={Games} />
<Route path="/game-asteroids" component={GameAsteroids} />
</Switch>
<Footer />
</div>
</Router>
);
};
export default App;

Answer 1

因此，无论Navbar在哪里或如何渲染，应用程序((都将始终渲染Navbar。你需要做一些类似的事情：

import { useLocation } from 'react-router-dom'
const App = () => {
const location = useLocation()
const atGame = location.pathname.includes('game-asteroids')
return (
<div className="App" id={load ? "no-scroll" : "scroll"}>
{!atGame && <Navbar />}
<ScrollToTop />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/resume" component={Resume} />
<Route path="/game" component={Games} />
<Route path="/game-asteroids" component={GameAsteroids} />
</Switch>
{!atGame && <Footer />}
</div>    
</Router>
)
}

我想这就是你的要求。如果没有，它应该足够近，让你得到你想要的。

Answer 2

如果只想从特定路由中删除页脚，可以使用location.pathname。它返回当前的url路径名称。然后你可以设置一个条件如下：

{location.pathname !== '/game-asteroids' && <Footer />}

尝试以下代码：

<Navbar />
<ScrollToTop />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/resume" component={Resume} />
<Route path="/game" component={Games} />
<Route path="/game-asteroids" component={GameAsteroids} />
</Switch>    
{location.pathname !== '/game-asteroids' && <Footer />}