React Router 的两种方式

组建router的方式 分为两种：

     1:  混合标签，就是 和其他标签 嵌套混合着来； 

     2：抽离router 单独控制；

先说第一种：

 <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to="/">main</Link>
                        </li>
                        <li>
                            <Link to="/about">about</Link>
                        </li>
                        <li>
                            <Link to="/topic">topic</Link>
                        </li>
                    </ul>

                    <Switch>
                    <Route path="/"  exact component={Main} />
                    <Route path="/about" component={About} />
                    <Route path="/topic" component={Topic} />

                    </Switch>
                </div>
            </HashRouter>

其他子组件里也可以嵌套route；

需要注意 根节点需要 exact精准匹配正则 ；其次节点如果需要 也需要精准匹配；

2，抽离

<HashRouter>
            <Home>
                <Switch>
                    <Route path="/main"  render={()=><Main>
                        <Route  path="/main/a" component={About} />
                    </Main>} />
                <Route path="/about"  component={About} />
                <Route path="/topic" component={Topic} />
                </Switch>
            </Home>
        </HashRouter>

所有的 route都写在一个页面 不混着来，这样方便我们做分配  ； 子组件里 用 {this.props.children} 来渲染route 

需要注意  的是最好不要用 “/” 根节点，这样就不用精准匹配了exact （否则子路由进不来）， 如果真的需要精准匹配   路由的末端再去精准匹配好了；