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地区别:
- react-router:实现了路由的核心功能,提供了router的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的ap;
- 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的组件和参数,对照演示结果,应该可以大致了解是什么吧)
个人的理解(个人理解是什么意思,应该都懂得),这种解决方式,大概就是就是将路径原本对应后台的能力,在路径找不到对应文件、无法体现其作用的时候,将其单纯的作为一个参数,然后根据这个参数,获取、渲染对应得组件。
(这需要后台配和了。单纯的前端,是做不到这种效果的吧)