react “/”根路徑下存在子路由，加上精確匹配後，子路由無法被加載

前言
當主頁根路徑爲/時，加上精確匹配後，並且當前路徑的組件下存在子路由，跳轉至子路由後，路由組件不會被加載，頁面空白，此篇文章並非完美解決，只能說是一種解決方法。
注：結尾註意有必要看一下，避免不必要的bug

前置條件

// index.js(入口文件)
import React from 'react';
import ReactDOM from 'react-dom';
// 路由組件
import AppRouter from './router';

ReactDOM.render(
  <AppRouter />,
  document.getElementById('root')
)

// 路由組件
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
// 引入組件
import Home from '../view/home';
import New from '../view/new';
import Topic from '../view/topic';

function AppRouter() {
  return (
    <Router>
      <div className="main">
        <div className="header">
        	<Link to="/">首頁</Link>
        	<Link to="/new">新聞</Link>
        	<Link to="/topic">話題</Link>
        </div>
        <div className="main-container">
          // 根路徑加上了精確匹配（exact）
          <Route exact path="/" component={Home}></Route>
          <Route path="/new" component={New}></Route>
          <Route path="/topic" component={Topic}></Route>
        </div>
      </div>
    </Router>
  )
}

export default AppRouter;

// home組件
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';

// 引入子組件
import Look from './children/look';
import List from './children/list';

class Home extends Component {
  render() {
    return (
      <div className="home">
        <p>我是home組件</p>
        	<Link to="/home/look">look</Link><br/>
        	<Link to="/home/list">list</Link>
        <div className="home-container">
          <Route path="/home/look" component={Look}></Route>
          <Route path="/home/list" component={List}></Route>
        </div>
      </div>
    );
  }
}
 
export default Home;

.一級導航正常切換沒問題



問題
切換根目錄的兩個子路由
可以看到路由跳轉了，home組件沒有被加載，包括子路由的組件也沒有被加載

解決方法
1）引入Switch以及Redirect兩個高階組件
2）Switch包裹所有的Route，Switch如果不寫會導致手動點擊左上角刷新頁面時，立馬回到**/home路徑，而不是你原先跳轉的路徑
3）首頁路徑需要更改，不能爲 / ，這就是前言說的不完美的地方，首頁的Route並不必須放在最開始，但必須放在Redirect**之前
4）Redirect重定向高階組件，匹配到首頁路徑後（from="/"）,重定向到設置的首頁路徑（to="/home"）

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
// 引入組件
import Home from '../view/home';
import New from '../view/new';
import Topic from '../view/topic';

function AppRouter() {
  return (
    <Router>
      <div className="main">
        <div className="header">
        	<Link to="/">首頁</Link>
        	<Link to="/new">新聞</Link>
        	<Link to="/topic">話題</Link>
        </div>
        <div className="main-container">
          {/* Switch作用：限制Route的包含型渲染，每次只能渲染一個Route */}
           <Switch>
             <Route path="/home" component={Home}></Route>
             <Route path="/new" component={New}></Route>
             <Route path="/topic" component={Topic}></Route>
             <Redirect exact to="/home" from="/" />
           </Switch>
        </div>
      </div>
    </Router>
  )
}

export default AppRouter;

關於某個路徑跳轉後，如果當前路徑存在子路由，將某個子路由設置爲默認顯示的組件，還是以前面的爲例，首頁下面的某個子路由設置爲默認顯示組件。
1）將其中一個路徑設置爲和主頁路徑一致，並加上精確匹配

注意
子路由跳轉路徑需要以上級路徑爲基礎
例：一級路由爲 /home的前提，默認顯示子路由和一級路由同名即可（需加精確匹配），其他子路由需要以此路徑爲基礎
/home/list, /home/look, 這樣的形式，不然會出現頁面空白的情況