小白从零开始写react-router app（欢迎指正）

1、搭建react脚手架

    前提是已经下载好了node.js，在你想要的位置进入命令操作界面----cmd。

npm i -g react-cli

2、新建一个react项目

    create-react-app是固定的写法，后面的app是项目名，可以自定义

create-react-app app

3、启动react项目

cd app
yarn start/npm run start
yarn build

4、在vscode或webstrom中打开项目文件

    删除src中的文件
    新建两个文件 index.js和App.jsx

5、index.js是主文件内部代码如下

import React from 'react'
import ReactDOM from 'react-dom'
import App frrom './App'

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

6、App.jsx是主入口文件

import React,{Component} from 'react'
export default class App extends Component {
    render() {
        return (
            <div>
                <!--这里是写html的地方-->
                html
            </div>
        )
    }
}

    pages、assets、components、api、config、utils
    --pages放首页的组件
    --assets放的是公共的资源文件，如公共的css，img等
    --components是放公共组件的
    --api是放组件所需要的方法的
    --config是放数据的
    --utils是放定义了一些常量的的文件

8、组件的格式和App.jsx一样，不同的只是return的内容不同，特殊的如路由组件

    下载react-router包有两种方法
    yarn add react-router/npm run react-router --save
    注意这两种下包方法你只能选一张，不然会导致掉包--下载好的包被莫名删除。

    import { NavLink } from 'react-router-dom'//记得还要引入这个
    
    // 下面内容是写在return（）中  
    <div className="footerNavWrap">
      // 每一个NavLink就是一个路由
      <NavLink to='/' className='footerItem'>
        <span className="iconfont icon-caidan06"></span>
        <span>首页</span>
      </NavLink>
      <NavLink className='footerItem' to='/category'>
        <span className="iconfont icon-categorynormal"></span>
        <span>分类</span>
      </NavLink>
    </div>
    <!--
    NavLink类似a标签一样,可以点击跳转;
    不过路由和a标签不一样,路由只会重新渲染局部页面,而a则是跳转刷新。
    to='/'里面写的是将要跳转的路由路径;
    如to='/category'
    -->

9、要想路由组件正的实现跳转，还需操作一下步骤

    1. 在index.js中引入--BrowserRouter库
    2. 将App包裹在 <BrowserRouter></BrowserRouter>标签中

// 引入BrowserRouter
import { BrowserRouter } from 'react-router-dom'

// 将原来的ReactDOM.render改成现在的
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, 
  document.getElementById('root')
);

10、在引入路由组件的组件中书写路由配置

    // 引入相应的库和组件
    import { Switch,Route,Redirect } from 'react-router-dom'
    import Admin from './pages/admin'
    import Category from './pages/category'
    import Discern from './pages/discern'
    import Personal from './pages/personal'
    import ShopingCar from './pages/shopingCar'
    
    // 下面内容是写在return（）中，和html文件一样
    <Switch>
      <Route path="/admin" component={Admin} />
      <Route path="/category" component={Category} />
      <Route path="/discern" component={Discern} />
      <Route path="/personal" component={Personal} />
      <Route path="/shopingCar" component={ShopingCar} />
      <Redirect to="/admin"/>
    </Switch>

以上就是一个简单的路由跳转页面完成了~~~，你要不信咱两就碰一下，你看好没好！