相信很多初学react的朋友在研究组件的路由配置问题时都很困扰,我也是折腾了半天才搞明白的。

一般情况下路由配置包含path和component两个信息:

  • component顾名思义是组件的意思,指的是要访问的组件的名称,这里要注意的是,如果是在根目录(src/page或者src/pages)下,直接用‘组件名’即可;

如果是别的目录,要加上组件的路径,比如‘test/HelloWorld'。

  • path顾名思义是路径的意思,指的是在浏览器中访问该组件时,自己指定的路径,可以自己随意定义的,但要保证布局文件中的Link to和path一致;

path并不是你写代码时组件的存放路径,这里很容易迷惑人。

举个栗子:

上图中的文件目录page下,HelloWorld在根目录,而根目录下的Dashboard目录下又包含了三个组件,分别是Analysis、Monitor和Workplace,

http://localhost:8000/hello这是访问HelloWorld组件的网址,hello是自己定义的,因为它在根目录下,所以config里定义路由时直接写组件名即可;

http://localhost:8000/dashboard/analysis是访问Analysis的网址,其中analysis是自己定义的,但他不在根目录下,所以要加上dashboard/,

如下图所示:

Reat学习笔记4的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. A bean with that name has already been defined in class path resource [org/springframework/transaction/annotation/ProxyTransactionManagementConfiguration.class] and overriding is disabled

    2019-12-19 13:26:17.594 WARN [main] o.s.boot.web.servlet.context.AnnotationConfigServletWebServerApp ...

  2. oracle中utl_raw

    RAW,类似于CHAR,声明方式RAW(L),L为长度,以字节为单位,作为数据库列最大2000,作为变量最大32767字节.LONG RAW,类似于LONG,作为数据库列最大存储2G字节的数据,作为变 ...

  3. Educational Codeforces Round 76 (Rated for Div. 2) D. Yet Another Monster Killing Problem 贪心

    D. Yet Another Monster Killing Problem You play a computer game. In this game, you lead a party of

  4. MySQL数据库实战之优酷

    目录 一.项目总结三步骤 二.项目需求分析 三.搭建框架 四.ORM框架分析 五.数据库设计 六.项目中各个功能模块分析 七.项目中遇到的问题及怎么解决的 八.客户端代码框架 8.1 conf 8.1 ...

  5. IT兄弟连 HTML5教程 HTML和CSS的关系

    HTML是描述网页的标记语言,是将内容放到网页上,虽然HTML本身也自带一些样式功能,通过自身的属性,来实现一些特定的效果,制作出来的只能是一个网页,而不是一个美观的网页.最主要的是在HTML里面,一 ...

  6. Kubernetes之Pod使用

    一.什么是Podkubernetes中的一切都可以理解为是一种资源对象,pod,rc,service,都可以理解是 一种资源对象.pod的组成示意图如下,由一个叫”pause“的根容器,加上一个或多个 ...

  7. Long Jumps CodeForces - 479D

    E - Long Jumps CodeForces - 479D Valery is a PE teacher at a school in Berland. Soon the students ar ...

  8. idea使用lombok不生效的解决办法

    file-->setting-->plugins点击下方的 browse repositories. 搜索lombok plugin. 安装后,重启. file-->setting- ...

  9. wpf datetime format

    <Style TargetType="{x:Type DatePickerTextBox}"> <Setter Property="Control.Te ...

  10. python基础(20):序列化、json模块、pickle模块

    1. 序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 1.1 为什么要有序列化 为什么要把其他数据类型转换成字符串?因为能够在网络上传输的只能是bytes,而能够 ...