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

Question

我正在使用 react router v4 进行路由。有一种情况是，当单击产品时，我想在横幅下方显示产品，但是当单击添加餐厅时，我不想在横幅下方的同一页面中显示它，而是在不同的页面中显示它。我如何在反应路由器 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 的回答是正确的方法，只是反应路由器版本错误。

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

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

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>
)

Answer 2

声明路由器

您希望将元素分解为简单的框并相应地设计路由器。 Basics of router is here

根据您要创建的内容，这就是我会做的事情

选项 1（重用组件并隐藏横幅）

App.js

const routes = {
  path: '/',
  component: App,
  indexRoute: { component: HomeScreen },
  childRoutes: [
    { path: 'restaurant', component: Content },
    { path: 'products', component: Products },
    { path: 'addrestaurant', component: AddRestaurant}
  ]
}

render(<Router history={history} routes={routes} />, document.body)

HomeScreen.js

class HomeScreen extends Component {
    constructor(props){
      super(props);
    }

    render() {
        return (
          <div>
            {
            this.props.location.pathname.indexOf('addrestaurant') < 0 
            ? <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>
            : null}
          </div>
          {this.props.children} 
        </div>
        );
    }
}

注意：this.props.children 是渲染子组件的位置。

选项 2（使用addrestaurant 作为兄弟状态）

App.js

const routes = {
  path: '/',
  component: App,
  indexRoute: { component: HomeScreen },
  childRoutes: [
    { path: 'restaurant', 
      component: Content, 
      childRoutes: [
        { path: 'about', component: About },
        { path: 'products', component: Products }
      ] 
    },
    { path: 'addrestaurant', 
      component: Restaurant,
      childRoutes: [,
        { path: 'add',  component: AddRestaurant },
        { path: 'edit', component: EditRestaurant }
      ] 
    }
  ]
}

render(<Router history={history} routes={routes} />, document.body)

Content.js

class HomeScreen extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <Banner />
        {this.props.children} 
      </div>
    );
  }
}

Restaurant.js

class Restaurant extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.children} 
      </div>
    );
  }
}

这真的取决于你想要做什么。希望这会有所帮助。