排除 <Header/>带有反应路由器的特定页面上的组件 [英] Excluding <Header /> component on a specific page with react-router

问题描述

这是一个工作代码:

const AppRouter = () =>(<浏览器路由器><div><标题/><开关><Route path="/" component={DashboardPage} exact={true}/><Route path="/:id" component={ViewerPage}/>//<-- 从该页面中排除 Header 组件<Route path="/create" component={CreatePage}/><Route path="/edit/:id" component={EditPage}/><Route path="/help" component={HelpPage}/><路由组件={NotFoundPage}/></开关>

</BrowserRouter>);导出默认的 AppRouter；

我似乎无法弄清楚如何从 ViewerPage 组件页面中排除 Header 组件.有没有办法做到这一点?

解决方案

withRouter react-router 包提供的高阶组件将使您能够访问位置对象.一旦你有了它，你就可以通过短路有条件地呈现标题.

import {withRouter} from 'react-router'const App = ({location}) =>(<div>{location.pathname !== '/exclusion-path' &&<标题/>}<开关>...</开关>

)使用Router(App)导出默认值

或在多个路径上排除...

const excludeArray = ['/路径一','/另一条路径',]const App = ({location}) =>(<div>{exclusionArray.indexOf(location.pathname) <0 &&<标题/>}<开关>...</开关>

)

如果您正在做任何严肃的事情，我建议您使用 context api 并在 context 提供的值上短路.如果是这种情况并且您需要一些指导，我很乐意向您解释.

附言如果您想使用 alpha Hooks API 来实现，我会非常兴奋.

为了解决共同点.

将路由器移到应用组件之外.

import {BrowserRouter as Router} from 'react-router-dom'从'react-dom' 导入 ReactDOMReactDOM.render(<路由器><应用程序/></路由器>,document.getElementById('render-target'))

Here's a working code:

const AppRouter = () => (
<BrowserRouter>
  <div>
    <Header />
    <Switch>
      <Route path="/" component={DashboardPage} exact={true} />
      <Route path="/:id" component={ViewerPage} /> // <-- Exclude Header component from this page
      <Route path="/create" component={CreatePage} />
      <Route path="/edit/:id" component={EditPage} />
      <Route path="/help" component={HelpPage} />
      <Route component={NotFoundPage} />
    </Switch>
  </div>
</BrowserRouter>
);

export default AppRouter;

I couldn't seem to figure out how to exclude the Header component from ViewerPage component page. Is there any way to do this?

解决方案

The withRouter Higher-order-Component provided by the react-router package will give you access to the location object. Once you have that you can conditionally render the header by short-circuiting.

import {withRouter} from 'react-router'

const App = ({location}) => (
  <div>
    {location.pathname !== '/exclusion-path' && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

export default withRouter(App)

or to exclude on multiple paths...

const exclusionArray = [
  '/path-one',
  '/another-path',
]

const App = ({location}) => (
  <div>
    {exclusionArray.indexOf(location.pathname) < 0 && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

If you're doing anything serious I'd recommend using the context api and short-circuit on a value provided by context. If this is the case and you need some direction I'd be happy to explain it to you.

P.S. If you want to do it with the alpha Hooks API I'll get really excited.

EDIT: To address commont.

Move your Router outside of the App component.

import {BrowserRouter as Router} from 'react-router-dom'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Router>
    <App/>
  </Router>,
  document.getElementById('render-target')
)

这篇关于排除 <Header/>带有反应路由器的特定页面上的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！