javascript - 路由到不同的页面[react-router v4]

Question

我正在使用 react router v4 进行路由。有一种情况是，当单击产品时，我想在横幅下方显示产品，但是当单击添加餐厅时，我想在不同的页面中显示它，而不是在横幅下方的同一页面中显示它。我怎样才能在 React Router v4 上做到这一点？

这是我的代码(现在点击添加餐厅时，表单框显示在同一页面的横幅下)

const routes = [
  {
      pattern: '/restaurant',
      component: () => <Content />
  },
  { pattern: '/addrestaurant',
    component: () => <AddRestaurant />
  }
];

class HomeScreen extends Component {
    render() {
        return (
          <Router>
            <div>
              <div className="ui grid banner">
                <div className="computer tablet only row">
                  <div className="ui inverted fixed menu navbar page grid">
                    <Link to="/restaurant" className="brand item">Restaura</Link>
                    <Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
                    <Link to="/products" className="item tab">Products</Link>
                  </div>
                </div>
              </div>
            <div className="ui page grid">
              {routes.map((route, index) => (
                   <Match
                       key={index}
                       pattern={route.pattern}
                       component={route.component}
                       exactly={route.exactly}
                   />
              ))}
            </div>
          </div>
          </Router>
        );
    }
}

Answer 1

user-013948 的回答是正确的方法，只是 react 路由器版本错误。

本质上，您要做的是将任何只应为某些匹配项呈现的代码移动到由这些匹配项呈现的组件中。

由于横幅只应由某些组件呈现，因此您应该为其创建一个组件:

const Banner = () => (
  <div className="ui grid banner">
    <div className="computer tablet only row">
      <div className="ui inverted fixed menu navbar page grid">
        <Link to="/restaurant" className="brand item">Restaurant</Link>
        <Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
        <Link to="/products" className="item tab">Products</Link>
      </div>
    </div>
  </div>
)

然后，任何应该显示横幅的组件都应该包含它:

const Content = () => (
  <div>
    <Banner />
    {/* other content */}
  </div>
)  

然后，当您呈现您的项目时，只有当横幅是 <Match> 的一部分时才会被呈现。的组件。

const App = () => (
  <Router>
    <div>
      <Match pattern='/restaurant' component={Content} />
      <Match pattern='/addrestaurant' component={AddRestaurant} />
    </div>
  </Router>
)