搭建第一个React项目

npx create-react-app myapp

1.创建项目之后，把 src目录删掉，然后自己新建一个src目录，在src的根目录里面创建index.js和App.js。

2.在src 目录里面新建一个 view文件夹用来存放页面，router文件夹用来配置路由。

3.在router文件夹中新建一个index.js配置路由，以下是代码:

import React, { Component } from 'react'
import {HashRouter as Router,Route,Switch} from 'react-router-dom';
import Header from '../view/Header'
import Content from '../view/Content'
import Footer from '../view/Footer'
export default class index extends Component {
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route path="/" component={Header}></Route>
                        <Route path="/header" component={Header}></Route>
                        <Route path="/content" component={Content}></Route>
                        <Route path="/footer" component={Footer}></Route>
                    </Switch>
                </Router>
            </div>
        )
    }
}

或者是动态路由:

import React, { Component } from 'react'
import {HashRouter as Router,Route,Switch} from 'react-router-dom';
import Header from '../view/Header'
import Content from '../view/Content'
import Footer from '../view/Footer'
export default class index extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[{
                path:"/",
                com:Header,
                exact:true,
            },{
                path:"/header",
                com:Header,
            },{
                path:"/content",
                com:Content,
            },{
                path:"/footer",
                com:Footer,
            }]
        }
    }
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        {/* <Route path="/" component={Header}></Route>
                        <Route path="/header" component={Header}></Route>
                        <Route path="/content" component={Content}></Route>
                        <Route path="/footer" component={Footer}></Route> */}
                        {this.state.list.map((item,index)=>{
                            return <Route path={item.path} component={item.com} exact={item.exact} key={index}></Route>
                        })}
                    </Switch>
                </Router>
            </div>
        )
    }
}

4.在App.js中引入路由。

import React, { Component } from 'react'
import Outer from './router/index';
export default class App extends Component {
    render() {
        return (
            <div>
                <Outer></Outer>
            </div>
        )
    }
}

5.然后在index.js中渲染到页面中。

import React from 'react'
import App from './App';
import ReactDom from 'react-dom';
ReactDom.render(<App />,document.getElementById("root"));

6.启动项目就可以了

npm run start