React 进阶（三）

React脚手架

创建 React 脚手架

！！！注：项目名称不许有大写字母
执行 create-react-app 项目名称

创建完成后

他会提示你四条命令
！！！注：yarn eject 命令是不可逆的谨慎操作

yarn start 		运行项目
yarn build		打包项目
yarn test		启动测试运行程序
yarn eject 		暴露配置文件

根据提示 使用cd进入项目目录 在执行 yarn start 启动项目
启动成功后

页面状态如下图

react 文件目录

• public ---- 静态资源文件夹
  • favicon.icon ------ 网站页签图标
  • index.html -------- 主页面
  • logo192.png ------- logo图
  • logo512.png ------- logo图
  • manifest.json ----- 应用加壳的配置文件
  • robots.txt -------- 爬虫协议文件
• src ---- 源码文件夹
  • App.css -------- App组件的样式
  • App.js --------- App组件
  • App.test.js ---- 用于给App做测试
  • index.css ------ 样式
  • index.js ------- 入口文件
  • logo.svg ------- logo图
  • reportWebVitals.js — 页面性能分析文件(需要web-vitals库的支持)
  • setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)

创建组件

1. 首先创建一个 components 文件夹
2. 在 components 放要写的组件 每个组件放一个文件夹
   
3. 在index.js里写入

import React, { Component } from 'react'

export default class One extends Component {
    render() {
        return (
            <div>
                我是One组件
            </div>
        )
    }
}

4. 在app组件中引入

//	因为我们写的时index命名的文件所以可以省略不写
//	组件命名一定要大写字母开头
import One from './components/one'
function App() {
  return (
    <div className="App">
      <One/>
    </div>
  );
}

export default App;

页面呈现

路由

他需要借助一个叫 react-router-dom 的 react 的插件库来实现

react-router-dom相关API

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

如何实现路由

1. 安装 react-router-dom 指令 npm install --save react-router-dom
2. 准备好两个组件
   
3. 借助 react-router-dom 里的 Link api 给路由指定路径

import One from './components/one'
import Tow from './components/tow'
import { Link } from 'react-router-dom'

function App() {
  return (
    <div>
      <div>
        <Link to="/one">About</Link>
        <Link to="/tow">Home</Link>
      </div>
    </div>
  );
}

export default App;

如果需要显示高亮请使用 NavLink 代替 Link 他会给选中的连接加一个 class 为 active 可以手动编写样式

import One from './components/one'
import Tow from './components/tow'
import { NavLink } from 'react-router-dom'
import './app.css'
function App() {
  return (
    <div>
      <div>
        <NavLink to="/one">About</NavLink>
        <NavLink to="/tow">Home</NavLink>
      </div>
    </div>
  );
}

export default App;

app.css

.active {
    background: rgb(141, 197, 235);
}

4. 在使用 react-router-dom 里的 Route api 检查路由的变化显示对应的组件

import One from './components/one'
import Tow from './components/tow'
import { Link, Route } from 'react-router-dom'

function App() {
  return (
    <div>
      <div>
        <Link className="list-group-item" to="/one">About</Link>
        <Link className="list-group-item" to="/tow">Home</Link>
      </div>
      <div >
        <Route path="/one" component={One} />
        <Route path="/tow" component={Tow} />
      </div>
    </div>
  );
}

export default App;

5. 给根路径下的index.js 使用 BrowserRouter 或 HashRouter 确认一个路由模式

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

6. 使用 Redirect 写默认重定向

import One from './components/one'
import Tow from './components/tow'
import { Link, Route, Redirect } from 'react-router-dom'

function App() {
  return (
    <div>
      <div>
        <Link className="list-group-item" to="/one">About</Link>
        <Link className="list-group-item" to="/tow">Home</Link>
      </div>
      <div >
        <Route path="/one" component={One} />
        <Route path="/tow" component={Tow} />
        <Redirect to="/one" />
      </div>
    </div>
  );
}

export default App;

7. 这样我们就完成一个简单的路由了
   
   

嵌套路由 、 单一匹配路由和严格匹配

在需要嵌套路由的地方重复一遍以上操作
只需把路径更改为 父级路径加上自己的路径即可

Switch的使用

1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/one" component={One}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'

export default class Home extends Component {
	render() {
		return (
			<div>
				<h3>我是Home的内容</h3>
				<div>
					<ul className="nav nav-tabs">
						<li>
							<MyNavLink to="/one/news">News</MyNavLink>
						</li>
						<li>
							<MyNavLink to="/one/message">Message</MyNavLink>
						</li>
					</ul>
					<Switch>
						<Route exact path="/one/news" component={News}/>
						<Route exact path="/one/message" component={Message}/>
						<Redirect to="/one/news"/>
					</Switch>
				</div>
			</div>
		)
	}
}