組建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 （否則子路由進不來）， 如果真的需要精準匹配   路由的末端再去精準匹配好了；