0511 Braft Editor和嵌套路由

1、 Braft Editor

https://margox.github.io/braft-editor/

npm install braft-editor --save

import 'braft-editor/dist/index.css'
import React from 'react'
import BraftEditor from 'braft-editor'

export default class CustomDemo extends React.Component {

  render () {

    const controls = [
      {
        key: 'bold',
        text: <b>加粗</b>
      },
      'italic', 'underline', 'separator', 'link', 'separator', 'media'
    ]

    return (
      <div className="editor-wrapper">
        <BraftEditor
          controls={controls}
          contentStyle={{height: 210, boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)'}}
        />
      </div>
    )

  }

}

　　2、复习嵌套路由

总路由，作为根组件

分支里没有exact

const BasicRoute = (props) => (
  <HashRouter>
      <Switch>
          <Route exact path="/" component={Mainpage}/>

          <Route  path="/home" component={Mainpage}/>
          <Route exact path="/my" component={Add}/>
      </Switch>
    <BottomMenu />
  </HashRouter>
);

子路由及菜单

function Mainpage(){
  return(
    <div>
      <div className="headmenu">
        <ul >  
            <MenuItem href="#/" name="home" index="0" />
            <MenuItem href="#/home/detail" name="detail" index="1" />
            <MenuItem href="#/home/third" name="third" index="2" />
        </ul>
      </div>
      <Switch>
          <Route exact path="/" component={AList}/>
          <Route exact path="/home" component={AList}/>
          <Route exact path="/home/detail" component={Detail}/>
          <Route exact path="/home/third" component={Detail}/>
       </Switch>   

      </div>
  )
}

效果