React（脚手架）——create-react-app撸api

路由模块化相当于一个简单的改写，然后通过引入的方式分离出来

  import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Link } from "react-router-dom"
  import './assets/css/App.css'
  import Home from './components/Home'
  import User from './components/User'
  import News from './components/News'


  class App extends Component {
    constructor(props){
      super(props)
      this.state={

      }
    }
    render() {
      return (
      <Router>
            <div>
                <Link to="/">Home</Link> <br/>
                <Link to="/user">User</Link><br/>
                <Link to='/news'>News</Link>
      

            </div>
      </Router>
      );
    }
  }

  export default App;

新建三个组件，接下来我们像vue一样给他配置一个数组

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import './assets/css/App.css'
import Home from './components/Home'
import User from './components/User'
import News from './components/News'
    const routes=[
      {
        path:'/',
        component:Home,
        exact:true
      },
      {
      path:'/user',
      component:User
      },
      {
      path:'/news',
      component:News
      }
    ]

变量要写在import下面，OK然后我们使用循环的方式将它循环一下

  render() {
    return (
    <Router>
          <div>
              <Link to="/">Home</Link> <br/>
              <Link to="/user">User</Link><br/>
              <Link to='/news'>News</Link>
              {
                routes.map((v,i)=>{
                  if(v.exact){
                    return <Route key={i} exact path={v.path} component={v.component}  />
                  }else{
                    return <Route key={i}  path={v.path} component={v.component} />
                  }
                })
              }

          </div>
    </Router>
    );
  }
}

代码应该很容易理解，此时就可以渲染一样的效果了

实现模块化也很简单，将其单独的写在一个js中并引入即可

比如我们新建文件夹model编写router.js文件，在js文件中编写数组并暴露

    import Home from './../components/Home'
    import User from './../components/User'
    import News from './../components/News'

        const routes=[
            {
            path:'/',
            component:Home,
            exact:true
            },
            {
            path:'/user',
            component:User
            },
            {
            path:'/news',
            component:News
            }
        ]
        export default routes

然后引入js文件，效果相同，维护起来根据router.js维护即可

回顾一下嵌套路由，之前的写法是在子路由中再嵌套Route

现在怎么写的？vue里面是使用children配置的，我们也用children配置一下

在router.js中的User组件插入children配置，接着在APP.js路由中我们将它传递一下

注意这里属性的关键词不能是children，不然会报错，接着在User组件中看看能不能接收到props

你会发现打印的是undefined，这样写是不行的，看下官方文档是怎么传的

注意这里的参数

OK 此时再刷新页面看下User组件

此时成功获取到了路径

既然获取到了路径就可以map循环渲染了

OK 项目中以后直接配置routes就好啦