React.js：应用程序内部的数据流

你好，我的名字是托尼，在这些课程中我们将讨论 关于应用程序文件夹结构内的数据流 以及带有上下文 API 的自定义挂钩。 在本课中，我们将讨论多个组件， 路线和导航。 我们来看看应用程序。 您可以在这里一项一项地添加任务。 勾选它们 并删除它们。 下面有一个计数器可以计数 为了我们。 至此一切都已完成。 我们由单个组件组成。 组件曾经位于应用程序中。 现在我们的应用程序看起来有点不同。 我们现在就看到了这一点。 这可以在 Slashnda 找到，如果我们去这里，我们 得到这个最小的小页面只是为了说明这一点 这表示欢迎使用我的应用程序。 所以我们是如何做到这一点的。 正在使用提供的react组件。 我们通过react router Dom 称为浏览器路由器或路由器。 这是它的命名法。 路由器是最顶层的组件。 路线就在下面。 现在我们再次导出浏览器路由器路由器。 我想我们可以这样做来消除混乱。 这实际上给了我们同样的东西。 所以浏览器路由器是最顶层的组件。 路线就在下面，并且是单独的路线。 这里是一个单一的路由组件。 那么这个单一组件内部发生了什么 点每个人。 小路 到某种组件。 服务于这条路线。 所以路径是第一位的。 所以对于Slash议程来说，当这条路径。 准确地说，就是我们正在使用的元素。 这条路线的输出是这样的。 议程元素就在这里。 我们来看一下。 这基本上就是我们所拥有的。 在我们将其移出之前的应用程序组件。 成为它自己的组成部分。 这些都是作为道具来的。 所以我们从应用程序组件传递它们。 其余的 是 作为。 以前也是这样。 所以这部分没有任何改变。 我们在这里做同样的事情。 只是我们没有传递任何道具。 无论如何，因为这是一个非常非常简单的组件。 它基本上只是在中间说欢迎使用我的应用程序 屏幕。 但我们也有能力。 在这里做一些非常整洁的事情。 所以，到目前为止，我们一直在使用精确路径，但我们也有。 能够使用通配符。 举例来说，如果我们想要每一个。 请求任务将任何内容重定向到议程，这是 我们将如何解决这个问题。 我们将使用路线组件，路径将是 任务星。 所以Star当然是通配符。 对于 Slash 任务路径之后的任何内容。 或者说是路径的一部分。 我们将使用 Navigate 这是一个特殊的 元素我们。 也从React Router Dom传输 我们将使用这个导航 导航至 Slash 议程。 让我们看看它是如何工作的。 那么，如果我们要去的话。 这里几乎任何东西， 我们将转向议程。 当然，现在在专业组织中，这 规模将会进一步扩大。 但基本上你要做的就是。 看到会是某种。 我们刚刚看到的内容的一个变体，但是 再次扩大规模。 达到专业规模 在现实世界环境中。 下一课我们就去。 查看正确的应用程序文件夹结构。 感谢您的观看。 再见。