在 react-router-dom 中的某些页面上隐藏 header
Hide header on some pages in react-router-dom
有没有一种方法可以隐藏我的页面 header 仅针对 React Router 中的某些路由?我现在的问题是我的 App
组件呈现我的 Main
组件,其中包含我的 BrowserRouter
,而我的 Header
呈现在我的 App
组件中,所以我无法根据路由路径呈现 header。
这是一些代码:
App.js
import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Main from './Main';
import Header from './Header';
import Footer from './Footer';
const App = () => (
<BrowserRouter>
<Header/>
<Main/>
<Footer/>
</BrowserRouter>
);
export default App;
Main.js
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from './Home';
import Login from './Login';
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/login' component={Login}/>
</Switch>
</main>
);
export default Main;
在此应用程序中,我想隐藏登录页面上的 header 和页脚。
您可以使用 withRouter Higher-Order 组件访问 App 组件中的 props.location 对象,并使用 props.location.pathname
检查用户是否在登录或注册页面
import {BrowserRouter, withRouter} from 'react-router-dom'
const App = () => (
<BrowserRouter>
{
props.location.pathname!=='/login' ? <Header/>:null
}
<Main/>
<Footer/>
</BrowserRouter>
);
export default withRouter(App);
我最终使用了 Redux。这是最好的选择,因为我有 20 多页(下面的代码中只显示了 3 页),所有这些页面上 header/footer 的可见性各不相同。我为页眉创建了一个 reducer,为页脚创建了一个。这是我的解决方案:
import ...
class App extends React.Component {
render() {
return (
<BrowserRouter>
{this.props.header ? <Header/> : ''}
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/signup' component={Signup}/>
</Switch>
{this.props.footer ? <Footer/> : ''}
</BrowserRouter>
);
}
}
const mapStateToProps = state => state;
export default connect(mapStateToProps)(App);
你可以这样做:
<Switch>
{authRoutes.map(({ path, component: C }) => (
<Route
key={`${C}-route`}
path={path}
render={(props) => (
<div className="app__activePage">
<C {...props} />
</div>
)}
></Route>
))}
{routes.map(({ path, component: C }) => (
<Route
key={`${C}-route`}
path={path}
render={(props) => (
<div className="app__activePage">
<Header />
<C {...props} />
</div>
)}
></Route>
))}
</Switch>
我通常在另一个文件中定义所有路线,然后按组导出。这让我可以:
- 在一处定义所有路由
- 更干净地处理不同的路由组
这对我有用:
props 在我的 class 组件中一直未定义
{window.location.pathname !== "/app" ? (
<NavBar />
) : null}
在 react-router-dom v6 中有一个钩子 useLocation 可以在 url 发生变化时获取它
使用它 100% 有用并解决了这个问题。
function App () {
let location = useLocation();
return (
<BrowserRouter>
{location.pathname === '/login' && location.pathname==='/signup' && <Header/>}
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/signup' component={Signup}/>
</Switch>
{location.pathname === '/login' && location.pathname==='/signup' && <Footer/>}
</BrowserRouter>
);
}
}
有没有一种方法可以隐藏我的页面 header 仅针对 React Router 中的某些路由?我现在的问题是我的 App
组件呈现我的 Main
组件,其中包含我的 BrowserRouter
,而我的 Header
呈现在我的 App
组件中,所以我无法根据路由路径呈现 header。
这是一些代码:
App.js
import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Main from './Main';
import Header from './Header';
import Footer from './Footer';
const App = () => (
<BrowserRouter>
<Header/>
<Main/>
<Footer/>
</BrowserRouter>
);
export default App;
Main.js
import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Home from './Home';
import Login from './Login';
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/login' component={Login}/>
</Switch>
</main>
);
export default Main;
在此应用程序中,我想隐藏登录页面上的 header 和页脚。
您可以使用 withRouter Higher-Order 组件访问 App 组件中的 props.location 对象,并使用 props.location.pathname
import {BrowserRouter, withRouter} from 'react-router-dom'
const App = () => (
<BrowserRouter>
{
props.location.pathname!=='/login' ? <Header/>:null
}
<Main/>
<Footer/>
</BrowserRouter>
);
export default withRouter(App);
我最终使用了 Redux。这是最好的选择,因为我有 20 多页(下面的代码中只显示了 3 页),所有这些页面上 header/footer 的可见性各不相同。我为页眉创建了一个 reducer,为页脚创建了一个。这是我的解决方案:
import ...
class App extends React.Component {
render() {
return (
<BrowserRouter>
{this.props.header ? <Header/> : ''}
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/signup' component={Signup}/>
</Switch>
{this.props.footer ? <Footer/> : ''}
</BrowserRouter>
);
}
}
const mapStateToProps = state => state;
export default connect(mapStateToProps)(App);
你可以这样做:
<Switch>
{authRoutes.map(({ path, component: C }) => (
<Route
key={`${C}-route`}
path={path}
render={(props) => (
<div className="app__activePage">
<C {...props} />
</div>
)}
></Route>
))}
{routes.map(({ path, component: C }) => (
<Route
key={`${C}-route`}
path={path}
render={(props) => (
<div className="app__activePage">
<Header />
<C {...props} />
</div>
)}
></Route>
))}
</Switch>
我通常在另一个文件中定义所有路线,然后按组导出。这让我可以:
- 在一处定义所有路由
- 更干净地处理不同的路由组
这对我有用:
props 在我的 class 组件中一直未定义
{window.location.pathname !== "/app" ? (
<NavBar />
) : null}
在 react-router-dom v6 中有一个钩子 useLocation 可以在 url 发生变化时获取它 使用它 100% 有用并解决了这个问题。
function App () {
let location = useLocation();
return (
<BrowserRouter>
{location.pathname === '/login' && location.pathname==='/signup' && <Header/>}
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/signup' component={Signup}/>
</Switch>
{location.pathname === '/login' && location.pathname==='/signup' && <Footer/>}
</BrowserRouter>
);
}
}