node搭建react-router开发环境

最新推荐文章于 2023-08-09 01:28:10 发布

vzhufeng

最新推荐文章于 2023-08-09 01:28:10 发布

阅读量300

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011393161/article/details/99623892

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

自己搭的脚手架，因为一些原因没使用webpack-dev-server，目录结构如下

|-src
    |-page1
      |-index.html
      |-index.js
      |-other.js
      |-index.scss

然后写着写着发现一个问题，因为写的是多页面形式的工程，每个目录下有一个html模板，又没有实际在生产中使用，所以写的内容比较简单，都是自己写一些测试的东西，但是这个结构如果要用react-router，就麻烦了，因为针对目前这个结构，是直接使用了express的static中间件来对生成的文件进行返回，webpack打包出的文件生成在dist文件夹下面，然后启动这样一个node文件来监听

const express = require("express");

const app2 = express();
const port2 = 3002;
app2.use(express.static('project/'));
app2.listen(port2);

访问的时候，一般是输入localhost:3002/page1.html这样来访问的，但是用到react-router的时候，不能直接在浏览器里输入路径了，比如我输入localhost:3002/page1.html/main/api，静态文件代理就失效了，这个事情摸索了挺久，但是结果一说特别简单，就是起两个监听，一个监听html，一个监听js和css，webpack打包的时候，给output配置一个publicPath，配置成一个和html不一样的端口，比如html是在3003上监听，js和css在3002上监听，生成的html模板如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
    // 注意下面这个script的src的路径
    <script type="text/javascript" src="http://localhost:3002/dist/0708.js"></script>
  </body>
</html>

node文件如下，

const express = require("express");
const fs = require("fs");

// 监听html
const app = express();
const port = 3003;
app.get("*", (req, res) => {
  const url = req.originalUrl;
  // 下面这行里readFileSync的路径可以自己改
  res.send(fs.readFileSync(`project/dist/${url.split('/')[1]}.html`).toString());
});
app.listen(port);

// 监听js和css文件
const app2 = express();
const port2 = 3002;
app2.use(express.static('project'));
app2.listen(port2);

踩坑

这个摸索的过程里，还遇到了一些坑，
1.react-router 3和4的不同用法

react-router 3是这样写的，basename是为了上面的html文件名可以不用在route里面写了，注意react-router版本是3的话，history这个包的版本也要是3

import { Route, Router, useRouterHistory } from 'react-router';
import { createHistory } from 'history';

const browserHistory = useRouterHistory(createHistory)({
  basename: '/app',
});

ReactDOM.render( (
  <Router history={browserHistory}>
    <Route path="/detail1" component={DetailPage} />
    <Route path="/detail2" component={DetailPage2} />
  </Router>
), document.getElementById('root'));

react-router 4是这样写的，注意react-router 4要安装的不是react-router，而是react-router-dom

import { Route, BrowserRouter } from 'react-router-dom';

const ddd = (
<BrowserRouter basename='/0708/main'>
    <Route path="/detail1" component={DetailPage} />
    <Route path="/detail2" component={DetailPage2} />
</BrowserRouter>
);

ReactDOM.render(ddd, document.getElementById("app"));

2.报错
如果写错了ReactDOM.render里面的document.getElementById的元素名称，会报这个，但是这个错，让人摸不着头脑Uncaught Invariant Violation: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.，不排除有别的情况会报这个，但是元素id写错了也是一种可能性

有兴趣可以看看我写的hellowebpack，相关代码都在里面
https://github.com/vzhufeng/helloWebpack

vzhufeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node搭建react-router开发环境

自己搭的脚手架，因为一些原因没使用webpack-dev-server，目录结构如下|-src |-page1 |-index.html |-index.js |-other.js |-index.scss然后写着写着发现一个问题，因为写的是多页面形式的工程，每个目录下有一个html模板，又没有实际在生产中使用，所以写的内容比较简单，都...
复制链接

扫一扫

专栏目录