react+antd學習記錄篇（一）router

剛接觸這個框架，並嘗試做一個後臺項目，第一步肯定是要利用路由把整個頁面的框架搭建起來

1.首先在src文件夾下，新建一個router文件夾，然後在這個文件夾下新建一個js文件，用於存放側邊欄的json數據。
類似於下面這樣（我寫的可能不是很標準，但是大概結構就是這樣的）

const  routers = [{
    sider:'Home',
    icon:'mail',
    child:[
        {
            path:'/home1',
            exact:true,
            sider:'home1',
            main:()=><News/>
        },
        {
            path:'/home2',
            sider:'home2',
            main:()=><News/>
        }
    ]
}]

 2.把這些數據拿過來動態生成左邊菜單欄（這裏需要參照ant官網側邊欄的寫法，就把自己的數據套進去。）

比方說：antd中側邊欄的結構是這樣的

<Menu>
  <Menu.Item>菜單項</Menu.Item>
  <SubMenu title="子菜單">
    <Menu.Item>子菜單項</Menu.Item>
  </SubMenu>
</Menu>

          瞭解了antd側邊欄的寫法之後  就把之前的json數據套進去。子菜單對應的就是router中的child。這裏說一個自己覺得挺暈的事情，也可能是對.map方法不是很瞭解，用.map吧routers最外層的數據都拿到了，但是內層的child裏面的數據一直拿不到，我還以爲map方法不能嵌套使用呢。就拿上面的例子來說，我最終是這麼實現左邊菜單欄的（寫的不是很嚴謹，大致就是這麼實現的）

{routes.map((route, index) => (
       <SubMenu key={index} title={<span><Icon type={route.icon}/><span>{route.sider}</span></span>}>
{route.child.map((item,index)=>(
   <Menu.Item key={index}><Link to={item.path}>{item.sider}</Link></Menu.Item>
    ))}
    </SubMenu>
))}

3.然後再說怎麼把這些路由跟要顯示的頁面對應起來。一般情況下路由跟要顯示的頁面是這麼寫的

<Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>

我們就可以看到，其實<Route>就是控制到底顯示的是那個頁面了，所以我們可以在頁面內容區域也應該寫成類似的，不過我們只需要一個Route就可以了  Route上所有的信息，比如path以及component都是從router裏面獲取的

現在就可以實現下圖的效果了

此文章僅記錄學習react的過程，以及我認爲項目中一些比較難得問題。