create-react-app 入门学习

全局安装 create-react-app

npm install create-react-app -g

创建项目

在全局安装了create-react-app 后创建项目，如果按照下面的第一种办法创建不成功，可以使用第二种办法

create-react-app react01

// 或者

npx create-react-app react01

使用路由

下载路由模块

npm i react-router-dom -s

为实现路由懒加载安装 react-loadable

npm i react-loadable -s

创建页面

在 src 目录下创建 pages文件,测试文件目录如下

pages => index.js代码

import Loadable from 'react-loadable';

import { ActivityIndicator } from 'antd-mobile';

const Home = Loadable({

    loader: () => import('./home'),

    loading: ActivityIndicator

  });

const Cate = Loadable({

    loader: () => import('./cate'),

    loading: ActivityIndicator

  });

export {

    Home,

    Cate

}

在 src 目录下创建创建routes.js

import {

    Home,

    Cate

} from './pages'

const routes = [

    {

        url: '/home',

        component: Home,

        text: '首页',

        isToggleFooter:true,

        isShowHeaderAndFooter: true

    },

    {

        url: '/cate',

        component: Cate,

        text: '分类',

        isToggleFooter:true,

        isShowHeaderAndFooter:true

    }

]

export default routes

在 app.js引入router模块和routes.js文件

import React, { Component, Fragment } from 'react';

import {

  Route,

  Redirect,

  Switch

} from 'react-router-dom'

import routes from './routes'

class App extends Component {

  render() {

    return (

      <Fragment>

        <header>Header</header>

        <Switch>

          {

            routes.map(route => {

              return (

                <Route

                  key={route.url}

                  path={route.url}

                  component={route.component} />

              )

            })

          }

          <Redirect exact from="/" to={routes[0].url} />

          {/* 这里用 redirect 进行 首页自动跳转到 /home 路由下

            exact 意味着精确匹配 当为 / 时才跳转 /home 不是包含 / 就跳转到 /home

        */}

          {/* <Redirect to = '/all'/> */}

          {/* 如果找不到页面 则去 4040页面 */}

        </Switch>

        <footer>尾部</footer>

      </Fragment>

    );

  }

}

export default App;

在 src 最外层 index.js使用 router模块

import React from 'react';

import ReactDOM from 'react-dom';

import {

    BrowserRouter as Router,

    Route

  } from 'react-router-dom';

import './index.scss';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

    <Router>

      <Route component = {App} />

    </Router>

  ,

  document.getElementById('root'))

路由间跳转

以home 页面为例

import React, { Component, Fragment } from 'react';

import { Link } from 'react-router-dom'

export default class Home extends Component {

    render() {

        return (

            <Fragment>

                <div>我是Home页</div>

                <button> <Link to="/cate">跳转到 cate 页</Link> </button>

            </Fragment>

        )

    }

}

巴特西

create-react-app 入门学习

全局安装 create-react-app

创建项目

使用路由

路由间跳转

最新文章

热门文章