Django+React全栈开发：路由

时间：2023-03-26 16:12:47 Python

react-router一般来说，现在的网站很少有单一的“页面”。对于我们的博客来说，除了文章列表的界面，至少要有一个文章详情页才行。单页应用（SPA）：你可能在官方介绍create-react-app的脚手架时看到过这个名词（注意不是做按摩的spa），但不要误以为单页就是没有“可以点击链接”。这里所说的单页面应用其实就是：由于我们把一个Web应用看成是一堆组件的组合，动态页面只需要动态更新和显示部分组件，而不是像传统方法那样动态更新和显示整个页面。两者都被刷新并重新加载所有资源。嗯，看到这里你应该明白了，create-react-app是一个适合搭建单页应用的脚手架，但并不是说要创建文章详情页就需要yarncreatereact-app再次创建一个新项目。好了，说了这么多，下面开始写代码。这里我们需要学习一个新的东西：react-router-dom。首先进入我们的react_drf/frontend目录，在终端运行yarnaddreact-router-dom安装依赖。功能组件我们之前已经讲过类组件。在React中，我们还可以创建功能组件。功能组件也称为无状态组件。他们可以接收一个道具作为参数，但他们不能使用状态。它没有状态。也没有生命周期函数（在本教程涵盖ReactHooks之前，这个说法是正确的）。为了引入功能组件，我们先拆分组件，从ArticleList中拆分出一个ArticleItem。constArticleItem=props=>(//这部分复制自ArticleList{props.item.title}

{props.item.body}
创建时间：{moment(props.item.created).fromNow()}{''}更新时间：{moment(props.item.updated).fromNow()}

)这里用到了箭头函数。想要了解这些基础知识的细节，建议去看看MDN、阮一峰的ES6入门教程或者现代JavaScript教程。ArticleItem组件的内容是从ArticleList复制过来的，所以现在修改ArticleList的内容：...{articleList.map((item)=>)}

...我们将aritcleList中的元素作为ArticleItem的道具传递。可以看到这里的ArticleItem组件是一个函数，它的返回值就是要渲染的内容。路由在我们开始写代码之前，让我们先来设想一下路由的划分。首先我们可以看到，三张图片的共同点是，它们都有最外层的矩形框和导航栏的矩形框。点击home，url为/，此时显示第一张图片的样式。点击about跳转到/about，显示第二张图片的样式。如果你点击一个ArticleItem的标题，你会输入/articles/articleId，显示第三个图的样式。因此，我们需要一个最外层的组件。我们可以使用之前的App，里面有一个固定的导航栏。当然，这也可以拆分为Nav组件，然后是包含ArticleList和ArticleItem组件的Home组件。此外，还有About组件和ArticleDetail组件。首先修改App.js：importReactfrom'react';import'./App.css';importArticleListfrom"./ArticleList";import{Switch,Link,Route}from"react-router-dom";importAbout来自“./About”；从“./ArticleDetail”导入ArticleDetail；constHome=()=>functionApp(){return(

);}exportdefaultApp;这里首先介绍一下react-router-dom中的三个组件。Link组件用于创建链接。Switch和Route一起使用。Switch将搜索子元素Route。当找到路由与当前url匹配时，将渲染该路由的内容，忽略其他路由。比如当前url是根路径/，那么上次路由中的Home会渲染到这里，因为Home中暂时没有其他元素，我是直接在App.js中定义的。请注意，有一个/articles/:articleId路由，它是文章详细信息页面的链接。这里介绍的ArticleDetail和About组件后面会补全。不要忘记在之前的index.js中我们渲染了ArticleList，现在改变它：...import{BrowserRouter}from"react-router-dom";ReactDOM.render(,document.getElementById('root'));要使用react-router-dom的路由，还需要App外套上的BrowserRouter。现在修改ArticleList.js以根据文章ID创建不同的链接：...import{Link}from"react-router-dom";…constArticleItem=props=>({props.item.title}……