React-myhome项目总结(一.登录页)

一.项目启动

1.安装项目

creact-react-app myhome

2.删除用不到的文件
serviceWorker.js,App.test.js和logo.svg

3.提示,windows电脑修改端口的方法:在package.json文件里增加"set PORT =端口名"即可(其它系统用cross-env插件来实现)

cross-env的使用用法:
a.安装

cnpm install --save-dev cross-env

b.设置(记得下面没有&&符合哦)

4.默认项目没有路由,所以同时安装路由

cnpm i react-router-dom --save

在App.js中导入路由

import {BrowserRouter as Router,Route,Link,Redirect,withRouter} from 'react-router-dom';

在App.js里面设置路由:

import React, {
    Component } from 'react'
// 导入路由

import {
   
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter,
  Switch
} from 'react-router-dom'

import './App.css'

class App extends Component {
   
  render() {
   
    return (
      <Router>
        <Switch>
          <Route  path="/" exact component={
   Login} />
          <Route path="/home" component={
   Home} />
          <Route path="/show" component={
   Show} />
          <Redirect to='/'/>
        </Switch>
      </Router>
    )
  }
}

const Login=()=>{
   
  return(
    <div>Login</div>
  ) 
}
const Home=()=>{
   
  return (
    <div>
      Home
    </div>
  )
}
const Show =()=>{
   
  return (