《React后台管理系统实战：十六》解决用browserRouter ——【end】

一、使用 BrowserRouter 的问题

a. 问题: 刷新某个路由路径时, 会出现 404 的错误
b. 原因: 项目根路径后的 path 路径会被当作后台路由路径, 去请求对应的后台路由,但没有
c. 解决: 使用自定义中间件去读取返回 index 页面展现
d. 注意: 前端路由的路径不要与后台路由路径相同(并且请求方式也相同)后台带api，前端不带

二、解决：实操

0.前端/src/api/index.js未改动，仅做参考

import ajax from './ajax'
import jsonp from 'jsonp'
import {message} from 'antd' //借用antd返回信息组件
// const BASE = 'http://localhost:5000'
const BASE = '/api' //注意base处

1.前端/src/App.js改回 browserRouter

import React,{Component} from 'react'
import {BrowserRouter,HashRouter,Route,Switch} from 'react-router-dom' //【1】BrowserRouter
import Admin from './pages/admin/admin'
import Login from './pages/login/login'

class App extends Component{
    constructor(props){
        super(props);
    }

    render(){
        return(
        //【2】删掉<hashRouter>，并改回browserRouter      
        <BrowserRouter>
        //<HashRouter>
           <Switch>
               <Route path='/login' component={Login}></Route>
               <Route path='/' component={Admin}></Route>
           </Switch>
        //</HashRouter>
        </BrowserRouter> 
        )
    }
}
export default App

2.测试运行

npm start 
正常运行

3.删除build重新打包，然后把里面内容移到服务端根目录下的public中

npm run build

4.把服务端项目/server.js中改成如下

// 声明使用静态中间件
app.use(express.static('public')) //原是pub
app.use('/api', indexRouter)  //修改此处为空，原是/api

5.运行服务端项目

npm start

问题：第一次访问http://localhost:5000时正常，刷新后显示异常

实际页面是：http://localhost:5000/home
显示异常如下：

Cannot GET /home

原因：打开控制台network看到请求地址为

Request URL:http://localhost:5000/home
Request Method:GET
Status Code:404 Not Found
Remote Address:[::1]:5000
Referrer Policy:no-referrer-when-downgrade

• 如果加个#号访问 http://localhost:5000/#/home 即可正常显示，原因是后台路由会自动根据#号访问public静态目录下index.html因此能正常访问

解决：只要在后台加个处理函数即可，如果没有对应资源就访问静态public下的index.html页面,它会通过index.html页面下的js路由访问对应前端页面：在服务端/server.js中加入如下代码

// 声明使用路由器中间件
const indexRouter = require('./routers')
app.use('', indexRouter)  //修改此处/api

const fs = require('fs') //【0】引入fs
// 【1】解决BrowserRouter访问404报错（必须在路由器中间之后声明使用）
app.use((req, res) => {
  fs.readFile(__dirname + '/public/index.html', (err, data)=>{
    if(err){
      console.log(err)
      res.send('后台错误')
    } else {
      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
      });
      res.end(data)
    }
  })
})

6.最后重启服务器端,再刷新就不会有问题出现

ctrl+c 结束之前进程
npm start

三、附录

服务端/server.js完整代码

/*
应用的启动模块
1. 通过express启动服务器
2. 通过mongoose连接数据库
  说明: 只有当连接上数据库后才去启动服务器
3. 使用中间件
 */
const mongoose = require('mongoose')
const express = require('express')
const app = express() // 产生应用对象

// 声明使用静态中间件
app.use(express.static('public')) //public
// 声明使用解析post请求的中间件
app.use(express.urlencoded({extended: true})) // 请求体参数是: name=tom&pwd=123
app.use(express.json()) // 请求体参数是json结构: {name: tom, pwd: 123}
// 声明使用解析cookie数据的中间件
const cookieParser = require('cookie-parser')
app.use(cookieParser())
// 声明使用路由器中间件
const indexRouter = require('./routers')
app.use('', indexRouter)  //修改此处/api

const fs = require('fs')

// 【1】解决BrowserRouter访问404报错（必须在路由器中间之后声明使用）
app.use((req, res) => {
  fs.readFile(__dirname + '/public/index.html', (err, data)=>{
    if(err){
      console.log(err)
      res.send('后台错误')
    } else {
      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
      });
      res.end(data)
    }
  })
})

// 通过mongoose连接数据库
mongoose.connect('mongodb://localhost/server_db2', {useNewUrlParser: true})
  .then(() => {
    console.log('连接数据库成功!!!')
    // 只有当连接上数据库后才去启动服务器
    app.listen('5000', () => {
      console.log('服务器启动成功, 请访问: http://localhost:5000')
    })
  })
  .catch(error => {
    console.error('连接数据库失败', error)
  })