Link和Route扥开配置时，url发生变化时，组件没有重新加载的问题

在使用react-router-dom时出现了问题，我将Link封装到一个左侧导航菜单中，然后把路由封装到另外一个组建中，在封装的时候没有注意到Router只能配置一个，导致在点击左侧导航栏时，url发生变化，并没有匹配到Route中的path，从而导致没有重新渲染组件。

在最外层配置一个总的Router:

import React, { Component } from 'react';
import { Badge, Breadcrumb, Icon, Input, InputNumber, Layout, Menu, Select } from 'antd';
import { BrowserRouter as Router } from 'react-router-dom'
import 'antd/dist/antd.css';
import '../../assets/css/App.css'
import '../../assets/css/main.css'
import logo from '../../assets/images/company_logo.png'
import ContentRouter from '../../components/routes/ContentRouter'
import SidebarConst from '../../components/sidebar/SidebarConst';
Layout.Header.background = "white";
const { Header, Content, Sider, Footer } = Layout;
const { Option } = Select;
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <Router>
                <div>
                    <div style={
  
  { width: '100%', height: "1200" }}>
                        <Layout>
                            <Header style={
  
  { background: '#3680C1', verticalAlign: "middle", height: "60px" }}>
                                <div style={
  
  { fload: "left", height: "100%" }}>
                                    <div style={
  
  { display: 'inline', paddingTop: '5px', paddingRight: '15px', height: "60px" }}>
                                        <img src={logo} alt="HAM-NG" style={
  
  { dispaly: "block", marginLeft: 0, marginTop: "auto" }}></img>
                                    </div>
                                    <div style={
  
  { display: 'inline', color: 'white', verticalAlign: "middle" }}>HAM-NG管理平台</div>

                                    <div style={
  
  { display: 'inline', float: 'right', verticalAlign: 'middle' }}>
                                        <Badge count={99} style={
  
  { paddingLeft: '10px', paddingRight: '10px', }}>
                                            <Icon type="mail" color="white" style={
  
  { fontSize: "30px" }} />
                                        </Badge>
                                        <Select defaultValue="ch" style={
  
  { width: 120, paddingLeft: '30px', paddingRight: '10px' }}>
                                            <Option value="ch">中文</Option>
                                            <Option value="us">English</Option>
                                        </Select>
                                    </div>
                                </div>
                            </Header>
                            <Layout style={
  
  { height: '800px', width: '100%' }}>
                                <Sider collapsible trigger={null} style={
  
  { background: '#fff' }}
                                    width={400}>
                                    <SidebarConst />
                                </Sider>
                                <Layout style={
  
  { padding: '0 24px 24px' }}>
                                    <Breadcrumb style={
  
  { margin: '16px 0' }}>
                                        <Breadcrumb.Item><a href="#">Home</a></Breadcrumb.Item>
                                        <Breadcrumb.Item><a href="#">Dashboard</a><