reactjs - 如何在除一个之外的所有路由中显示反应组件？

Question

我希望我的 ProjectButton 组件在除 /projects 之外的所有路由中呈现。有没有办法用反应路由器来处理这个问题？

<Router>
    <React.Fragment>
      <Route path={baseURL} component={ProjectButton} />
      <Route exact path={baseURL} component={Home} />
      <Route exact path={baseURL + '/about'} component={About} />
      <Route exact path={baseURL + '/work'} component={Work} />
      <Route exact path={baseURL + '/projects'} component={Projects} />
    </React.Fragment>
  </Router>

标签： reactjsreact-router

Answer 1

You can do it with render props:

<Route path={baseURL} render={props =>
  <>
    <Home />
    <ProjectButton />
  </>
} />

<Route {baseURL + '/projects'} render={props =>
  <Projects />
} />

You can also pass multiple components for a route, see this

Or why not handle it in your component? Return null for certain paths (I personally would prefer this one)

render() {
    const {pathname} = this.props.location;
    if(pathname === "/projects") {
        return null;
    }

    ..
    ..
}