如何通过反应路由器渲染内部组件？

Question

如何使用react-router在组件中渲染内部组件？ 我需要在中心块中渲染服务块

我的结构：

主要链接：

• app href =“ /”
  • service href =“ / service”
• contacts href =“ / contacts”

导航

const Menu = ({ match }) => {
  return(
    <div className="menu_container">
      {/* <Page /> */}
      <ul className="menu_list">
        <li>
          <div className="menu_icon">
            <img src={require('./img/feed.png')} alt="" />
          </div>
            <Link to="/">Feed</Link>
        </li>
        <li>
          <div className="menu_icon">
            <img src={require('./img/ask.png')} alt="" />
          </div>
            <a href="/">Ask a Colleague</a></li>
        <li>
          <div className="menu_icon">
            <img src={require('./img/companies.png')} alt="" />
          </div>
            <a href="/">Companies</a>
        </li>
        <li>
          <div className="menu_icon">
            <img src={require('./img/services.png')} alt="" />
          </div>
            <Link to={{pathname: 'service'}}>Service Directory</Link>
        </li>
        <li>
          <div className="menu_icon">
            <img src={require('./img/services.png')} alt="" />
          </div>
            <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
    </div>
  )
}

AppLinks

class AppLinks extends Component {
  render(){
    return(
      <Router>
        <Provider store={store}>
          <Switch>
            <Route exact path='/' component={App} />
            <Route path='/contacts' component={Contacts} />
            <Route component={Page404} />
          </Switch>
        </Provider>
      </Router>
    )
  }
}

需要在中心块内使用href =“ / service”呈现的服务块

import React, { Component } from 'react';
import ServiceList from './ServiceList';
// import { Switch ,Route } from 'react-router-dom';


class Service extends Component {
  render(){
    return(
      <div className="service_container">
        <ServiceList />
      </div>
    )
  }
}

export default Service