React 从无到有全家桶

1.全局安装create-react-app
npm i -g create-react-app
2.使用 create-react-app reactapp(项目名称)
3.启动项目
cd reactapp
npm start
4.启动成功

5.看看package.json

这里我创建的项目 react 版本：17
6.接下来配置路由
6.1.引入路由包
npm install --save react-router react-router-dom
react-router：是基本的router包。

react-router-dom：随着react生态环境的壮大，后出现的包，这个包比react-router包轻巧了很多。

注意：其实安装了react-router包就不用安装了react-router-dom包了，这里只是为了给大家一个提示，所以安装了两个包。在实际开发中，请根据需要进行安装。安装时使用–save，因为这是要在生产环境中使用的。
6.2设置路由配置文件

1）在src目录下新建一个Router/index.js文件用于管理路由，这里需要引入一些对应的组件，比如首页啊，关于我们页面啊之类的页面，还有路由包文件。react路由中的Switch和exact的使用
Router的history是必需的props
Switch表示只渲染第一个与当前地址匹配的
Route的props path为路径，component为路径对应的页面
exact属性表示精确匹配

2）在src目录下新建一个Container目录用于管理页面，在此创建两个页面Page1.jsx，Page2.jsx。

Page1.jsx代码如下：

import React from 'react';
 
class Page1 extends React.Component{
	render(){
		return(
			<div>
			<div>This is Page1!</div>
			</div>
		);
	}
}
 
export default Page1;

并且在Router/index.js文件中引用

import Page1 from '../container/Page1';
import Page2 from '../container/Page2';
import React from 'react';
import {Router,Route,Switch,Redirect} from 'react-router-dom';
import { createHashHistory } from "history";
const history = createHashHistory();

class RouterConfig extends React.Component{
    render(){
        return(
            <Router history={history}>
                <Switch>
                    <Route path='/' exact render={()=>(
                        <Redirect to='/Page1'/>
                    )}/>
                    <Route path='/Page1' component={Page1}/>
                    <Route path='/Page2' component={Page2}/>
                </Switch>
            </Router>
        )
    }
}
export default RouterConfig;

6.3在入口文件引入路由配置文件

import RouterConfig from './Router/index.js';
ReactDOM.render(<RouterConfig/>, document.getElementById('root'));

未完待更…