react中路由和按需加载的问题

yarn add react-router-dom

import {Link,BrowserRouter,Switch, Route} from 'react-router-dom';
ReactDOM.render((
     <BrowserRouter>
          <Switch>
              <Route  path="/list" component={ListDemo}/>
              <Route  path="/a" component={A}/> 
              <Route  path="/b" component={B}/>
          </Switch> 
      </BrowserRouter>
),mountdom)

<Link to="/a">a</Link>

<BrowserRouter>
   <Switch>
     <Route exact path="/" render={props=><Menu {...props} url="list"><ListDemo/></SiderDemo>}/>
     <Route  path="/list" render={props=><Menu {...props} url="list"><ListDemo/></SiderDemo>}/>
     <Route  path="/a" render={props=><Menu {...props} url="a"><A/></SiderDemo>}/> 
     <Route  path="/b" render={props=><Menu {...props} url="b"><B/></SiderDemo>}/>
   </Switch> 
</BrowserRouter>

//上来路由只匹配到Menu中
      <BrowserRouter>
          <Switch>
            <Route  path="/" component={Menu}/>
          </Switch> 
      </BrowserRouter>
//上面的route就一个组件menu，在menu中再次定义route，可以实现路由嵌套
<Menu>
    <顶部></顶部>
    <侧栏 selectedurl={this.props.location.pathname}>
    </侧栏>
    <内容部分>
         <Route exact path="/list" component={List}/>
         <Route exact path="/a" component={At}/>
         <Route exact path="/b" component={Bt}/>
    </内容部分>
<Menu>

    output:{
        filename:"[name]-bundle.js",
        chunkFilename: "[name]-chunk.js",
        path: __dirname+'/dist'
    },

import(/* webpackChunkName: "app" */'./app').then(function(res){
    let xx= res.default;//xx就是app的export default
})

import React, { Component } from "react";
export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }
    async componentDidMount() {
      const { default: component } = await importComponent();
      this.setState({
        component: component
      });
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
  return AsyncComponent;
}

const List=asyncComponent(()=>import(/* webpackChunkName: "list" */"./router/List"))
const At=asyncComponent(()=>import(/* webpackChunkName: "a" */"./router/A"))
const Bt=asyncComponent(()=>import(/* webpackChunkName: "b" */"./router/B"))

<HashRouter>
  <Switch>
    <Route  path="/" component={SiderDemo}/>
  </Switch> 
</HashRouter>
class SiderDemo extends React.Component {
  render() {
    let selected=this.props.location.pathname.substring(1)
    if(selected==="")selected="list"
    return (
      <Layout>
        <Sider>
          <Menu defaultSelectedKeys={[selected]}>
           .........................
          </Menu>
        </Sider>
        <Layout>
          <Header></Header>
          <Content >
            <div>
                <Route exact path="/list" component={List}/>
                <Route exact path="/a" component={At}/>
                <Route exact path="/b" component={Bt}/>
                <Route exact path="/" component={List}/>
            </div>
          </Content>  
          <Footer></Footer>
        </Layout>
      </Layout>
    );
  }
}

import { HashRouter as Router , Route, Link } from 'react-router-dom'
 
export default function App () {
  return (
    <div>
      <h1>react路由基本使用</h1>
      <Router>
        <Link to="/comment">评论</Link>
        <Link to="/search">搜索</Link>
 
        <Route path="/comment" component={Comment} />
        <Route path="/search" component={Search} />
      </Router>
    </div>
  )
}
ReactDom.render(<App />, document.getElementById('root'))

<NavLink to="/xxx" activeClassName="active">链接</NavLink>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
        </Switch>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/article" component={Article} />
          <Route path="/article/123" component={ArticleDetail} />
          <Route component={Page404} />
        </Switch>

<Redirect from="/" exact to="/comment" /> 当精准匹配到/ 时 ,跳转到comment路径