路由到不同的页面[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

声明路由器

您希望将元素分解为简单的框并相应地设计路由器。 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>
    );
  }
}

这实际上取决于你想要做什么。希望这会有所帮助。

Answer 2

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