从零开始学习ReactJS -- 02 -- 然后要把路由配置起来才能区分页面啊！

从零开始学习React - 02

学习路由配置

查询度娘， react的路由配置有且仅有一种 react-router react-router-dom

安装react-router-dom

npm install react-router-dom

执行完成后安装完成

开始配置

我没有找到react-router-dom的中文官方文档，只能拼凑这看教程来进行学习
单独在src下建立router文件夹进行路由配置
在 src/router 下建立index.js进行路由配置

import React from 'react'
import Loadable from 'react-loadable'  //此处安装使用  npm install react-loadable 进行安装
import {BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'

import NotFound from '../pages/NotFound/NotFound'


function Loading(){
    return <div>Loading</div>
}

const Home = Loadable({
    loading: Loading,
    loader: () => import('../pages/Home/Home')
})

const Login = Loadable({
    loading: Loading,
    loader: () => import('../pages/Login/Login')
})


class IRouter extends React.Component{
    render(){
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={Login} />
                    <Route path="/" exact component={Home} />

					{/* 404页面 */}
                    <Route path="*" component={NotFound} />
                </Switch>
               

                <li><Link to="/">Home</Link></li>
                <li><Link to="/login" >Login</Link></li>
                
            </Router>
        )
    }
}
export default IRouter

src/index.js入口文件进行修改成

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Router from './router/index'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

页面内容示例

import React from 'react'

class Home extends React.Component{
    // constructor(props){
    //     super(props);
    // }

    render(){
        return  (<div>This is Home</div>)
    }
}

export default Home;

配置内容的说明

页面

我将页面放到src/pages里面了 这是我的编码习惯，怎样放置都是可以的，只要引入的时候路径正确就行了

react-loadable

对于react-loadable这个插件的安装是因为之前弄过vue， 熟悉vue的都知道在vue中路由进行配置的时候都是进行懒加载页面，如下写法

const Home = () => import('../pages/Home/Home');
const Login = () => import('../pages/Login/Login');

然后当我用同样的写法在ReactJS进行这样配置的时候确产生了如下报错

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    in Home (created by Context.Consumer)
    in Route (at router/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at router/index.js:10)
    in IRouter (at src/index.js:10)
    in StrictMode (at src/index.js:9)

然后百度得到改正结果就是引入react-loadable进行页面懒加载，而且还可以配置加载期间的过度效果，感觉非常nice

现在的目录结构

结尾

这样路由的配置也算是可以配置上了，接下来进行学习嵌套路由的配置