一、创建项目
1.npm install -g create-react-app;
2.create-react-app my-app(my-app为项目名字);
这样一个react项目就初始化好了,运行npm start启动项目可查看,接下来可以配置路由。
二、多页面路由
1.安装React Router
React Router已被拆分成三个包:react-router,react-router-dom和react-router-native。你不需要直接安装react-router,react-router包提供核心的路由组件与函数。其余两个提供运行环境(浏览器与react-native)所需的特定组件,但是他们都暴露出react-router中暴露的对象与方法。你应该为你的环境选择正确的包。我们进行的是网站(将会运行在浏览器)构建,所以应安装react-router-dom。
npm install -save react-router-dom
当进行新项目时,你需要选择使用哪种路由。对于浏览器项目(网站),react-router4提供了和两个组件。前者在你有服务器处理动态请求的时候使用,后者在静态网站的时候使用。
通常我们选择使用,但是如果你的网站将运行在只有静态文件的服务器上,是一个不错的方案。
对于我们的项目,我们假设我们的网站将架设在动态服务器上,所以我们选择的路由组件是<BrowserRouter>
2.创建路由,使用Link来进行路由导航
在src目录下新建Routes.js文件,定义路由:
修改App.js文件:
修改src目录下的index.js文件:
这样路由就配置好了,在页面中可以用Link标签进行跳转:
现在一个简单的demo就完成了,接下来是打包发布。
三、打包
在项目目录下,运行npm run build,进行打包,打包完成后会在目录下生成一个build文件夹,build生成的这些东西要放在服务器root下。
四、布署
布署的时候你必须把build里的文件直接放到服务器的根路径下,比如,你的服务器IP是47.96.134.256,应用服务器端口为8080,你应该保证http://47.96.134.256:8080这种访问方式,访问到的是你的build下的文件。如果你希望以http://47.96.134.256:8080/build/index.htm这种方式访问应用,那么你可以在package.json文件中增加一个homepage字段:
"homepage": ".",