2.2.0.在webpack中创建一个简单的react-router案例

0前提：

在之前的一个react案例demo基础上进行react-router编写。（https://blog.csdn.net/weixin_47870554/article/details/106728510）

1.准备:

react-router是用作react处理路由跳转用的。个人理解，其作用就是，将路径和react组件联系在一起，访问那个路径的时候，将相关的组件渲染出来。

需要npm安装react-router：

npm install react-router react-router-dom --save-dev

简单地说一下react-router与react-router-dom地区别：

1. react-router：实现了路由的核心功能，提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的ap；
2. react-router-dom：基于react-router,也就是说依赖于react-router，加入了一些在浏览器运行下的一些功能，提供了BrowserRouter、Route、Link等api，可以通过dom操作触发事件控制路由。

5.2版本的react-router和React-router-dom

2.简单的查看一下API:

先看看react-router和react-router-dom有哪些可以提供我们使用的方法，不需要知道具体含义是什么，甚至不需要知道怎么使用，只需要知道它们存在就可以了。将demo.js的代码改成如下：

import React from 'react';
import ReactDOM from 'react-dom';

const ReactRouter = require('react-router');
const ReactRouterDOM = require('react-router-dom');

console.log("ReactRouter:", ReactRouter);
console.log("ReactRouterDOM:", ReactRouterDOM);

结果：

嗯，可以通过这些提供给我们的方法，通过这些慢慢地了解react-router和react-router-dom。

3.一个简单的demo：

将demo.js的代码改成如下：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route} from "react-router-dom";

const world = () => (
    <h2>world</h2>
)
const react = () => (
    <h2>react</h2>
)
const router = () => (
    <h2>router</h2>
)

const Hello = () => {
	return 	<Router>
   	    	    <Route path="/" component={world}></Route>
   	    	    <Route path="/react" component={react}></Route>
   	    	    <Route path="/router" component={router}></Route>
			</Router>
}

ReactDOM.render(
	<Hello/>,
	document.body
);

以上代码能够根据浏览器的路径，返回对应的组件，进行渲染显示。

结果会出错：找不到这个页面了！

为什么呢？因为就是找不到这个页面了.......嗯，以下都是个人的理解。（意思就是让你保持自己的思考，我只是提供自己的参考意见，如果错了不要找我）

react-router的路由管理，应该是属于前端的（应该，表示下面的话，我现在还没有能力验证源码，只是猜测），也就是说，必须是在这个页面才能生效，渲染对应的组件。而在这个案例，服务器中只有一张对应根目录的页面，react路径没有页面。所以，访问的时候，自然是404了。

那怎么办呢？react-router是根据页面路径渲染的，而它本身又只能在自己的页面中生效，如果改变路径的话，就会跳到别的路径，不在自己的页面内，它就不能生效了，这样的矛盾之下，要它何用？

矛盾的关键就是，页面和路径是绑定的，一个页面对应一个路径，如果不同的路径还是对应react-router所在的页面，那它不就能更具不同的路径，渲染改变组件了吗？

所以需要在webpack的配置文件中改变一下参数。在devServer对象中，添加一个属性historyApiFallback，将它设置为true。

module.exports = {
  ......
  ......
  devServer: {
    hot: true,
    historyApiFallback: true
  }
};

这个参数的意思就是，在找不到页面，404的时候，返回指定的首页面。（官网原文：When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true:）

效果如下：react路径，在BrowserRouter 中，包含了更目录路径，所以会在更目录路径下渲染。

这样，就能成功根据路径渲染出对应的组件了。（至于在demo中，router的组件和参数，对照演示结果，应该可以大致了解是什么吧）

个人的理解（个人理解是什么意思，应该都懂得），这种解决方式，大概就是就是将路径原本对应后台的能力，在路径找不到对应文件、无法体现其作用的时候，将其单纯的作为一个参数，然后根据这个参数，获取、渲染对应得组件。

（这需要后台配和了。单纯的前端，是做不到这种效果的吧）