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

我使用react路由器v4进行路由。有一种情况是，当单击产品时，我希望在横幅下方显示产品，但当单击添加餐厅时，我希望在不同页面中显示产品，而不是在横幅下方的同一页面中显示产品。如何在react路由器v4上执行此操作

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

const路由=[
{
模式：“/餐厅”，
组件：（）=>
},
{模式：'/addrestaurant'，
组件：（）=>
声明路由器
您希望将元素分解为简单的方框，并相应地设计路由器

根据您试图创建的内容，下面是我将要做的

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

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

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)

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

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

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

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

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

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

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)

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

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

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

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

类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.children}
);
}
}

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

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

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)

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

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

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

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

类扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.children}
);
}
}

这真的取决于你想做什么。希望这能有所帮助。
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 Banner=（）=>(
餐厅
添加餐厅
产品
)

然后，应显示横幅的任何组件应包括：

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

const Content=（）=>(
{/*其他内容*/}
)  

然后，在渲染项目时，仅当横幅是
组件的一部分时，才会渲染该横幅

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

const-App=（）=>(
)
“我想在不同的页面中显示它”。这是在新选项卡/窗口中还是在替换横幅的视图中？如果是新选项卡，您可以只在新选项卡中执行此操作。
。在同一选项卡中，从上到下的布局不同。抱歉，英语不是我的母语，因此我很难向您说明我的问题。例如，单击“问题”选项卡旁边的“作业”按钮stackoverflow的。问题和作业页面不同。在我的例子中，主页是所有菜单（主页、产品和添加餐厅）所在的父级。产品显示在父级组件中，即主页（您可以看到横幅下方的三个餐厅）.Add restaurant应显示在另一页而不是主页中。但我使用的是react router v4。感谢您的支持。它肯定会对使用早期版本react router的用户有所帮助。