React Js 在某些路径上隐藏按钮

Question

我有一个header

const Header = () => (
  <header className="header">
    <h1 className="title">Sport shop</h1>
    <a href="/add" className="addBtn">Add a new shirt</a>
    <a href="/add" className="addBtn">back to homepage</a>
  </header>
);

这是一个通用组件，但一旦我在路线“/addshirt”上，我只想显示后退按钮。同样，当我在主页上时，我只想显示 'add a new shirt button'

我要起诉 React 路由器

  <Router>
        <div className="inner">
          <Header />
          <Route exact path="/" component={home} />
          <Route exact path="/addShirt" component={AddShirt} />
        </div>
      </Router>

Answer 1

您可以为此使用相同的 <Route /> 组件！仅当 <Route /> 匹配给定路径时，它才会呈现传递的 component 或 render 函数。

试试

const Header = () => (   
  <header className="header">
    <h1 className="title">Sport shop</h1>
    <Route exact path="/" render={() => <a href="/add" className="addBtn">Add a new shirt</a>} />
    <Route exact path="/addShirt" render={() => <a href="/add" className="addBtn">back to homepage</a>} />   
  </header> 
);

另请查看 the docs 路线组件。

React Js 在某些路径上隐藏按钮

Reactsjs Hide button on certain paths

components

routes

show-hide

reactjs

react-router