定义路由

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在文件的底部,用一个 ReactDOM 的 render 方法 .. 它的第一个参数是要显示的东西,这里我们要使用路由,可以根据不同的地址使用不同的组件。

先输入一组括号 .. 然后用一组 Router .. 在它里面再用 Route 去定义路由 .. 上面加上一个 path 属性,它的值就是定义的路由的地址, 先输入一个 / ,表示应用的首页 … 后面指定一下跟这个路由对应的组件,用一个 component 属性 .. 它的值先用一组大括号,里面加上组件的名字。这样在访问应用首页的时候,就会使用 App 这个组件接待用户。

在这个路由里可以继承嵌套一些东西,同样使用一组 Route ,添加 path 属性,指定路由的地址,这里设置成 tv , 再添加一个 component 属性,设置一下在访问 /tv 的时候,要使用哪个组件,设置成 TV ..

在这个路由里可以继承嵌套一个路由, 这个 Route 可以使用一个自关闭的标签 .. path 的值设置成 shows/:id ,这里的 :id 是路由里的一个参数,在组件里你可以得到这个参数的值,这样组件可以根据这个参数的值来显示对应的内容。

再添加一个 component 属性,设置一下组件的名字, 这里可以使用 Show 这个组件。 下面再设置一下 render 方法的第二个参数,就是组件要显示的位置 .. 在 index.html 里面,有一个 id 是 app 的元素,我们可以把组件显示在那里 ..

然后再找到 App 这个组件,在这里面可以去添加两个链接,链接的就是刚才定义的路由的地址 ..

我们要用的是 react router 的 Link 组件 .. 加上一个 to 属性,它的值就是链接上的地址 .. 再用一个 className 添加一个类,名字是 item,链接上的文字是 首页 ..

用类似的方法再添加一个链接 .. 复制,再修改一下 .. . 链接上的文字是电视 .. to 属性的值改成 /tv . 保存 .. 这里又提示了一个错误 .. 因为这个 getElementById 的后面又了一个分号 .. 去掉这个分号 .. 再保存一下 ..

回到浏览器 …

现在打开的是应用的首页,地址就是一个斜线 .. 它的后面有一个 # 号,# 号后面还有一个 /?_k=d5lz79 .. 我们先不用管这些东西。

点击 电视 这个链接 .. 现在打开的地址就是 /tv .. 这样就会使用 TV 这个组件里面的东西 .. 这里就是一些文字 .. 电视节目列表 ..

下面我们再手工的去打开一个地址 .. 在这个 tv 的后面输入一个 /shows/ 后面加上一个 id 号 … 回车 … 访问这种类型的地址的时候,就会使用 Show 这个组件 … 在页面上显示 节目 这两个字 ..

定义路由《 React 路由 》

统计

12097
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点