React中前端路由的示例代码.docxVIP

第

React中前端路由的示例代码

目录一.url是什么二.使用步骤

一.url是什么

访问不同url,展示不同的组件

二.使用步骤

安装React路由：命令行中执行npminstallreact-router-dom--save(注意此处的版本为npminstallreact-router-dom@4.3.1--save)

两个js文件，分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js；访问localhost:3000/list的时候就显示list.js。代码如下：

list.js

importReact,{Component}fromreact;

import{List}fromantd;

constdata=[

aaa,

bbb,

ccc,

ddd

classListextendsComponent{

render(){

return(

List

newButton.js

importReact,{Component}fromreact;

import{List}fromantd;

constdata=[

aaa,

bbb,

ccc,

ddd

classNewListextendsComponent{

render(){

return(

List

在index.js中使用router

1)引入路由：import{BrowserRouter,Route,Link}fromreact-router-dom

2)渲染BrowserRouter组件,其中包含一条条的路由

classEntryextendsComponent{

render(){

return(

BrowserRouter

div

Routepath=/listcomponent={NewList}/

Routepath=/buttoncomponent={NewButton}/

/div

/BrowserRouter

3）浏览器中输入localhost:3000后，什么后没显示出来，因为此时没有匹配的路由

4）根据路由的配置，浏览器中输入：localhost:3000/list就会显示newList组件

输入：localhost:3000/button就会显示newButton组件

注：BrowserRoute表示定义一个路由，Route表示一个路由项，

5）如想通过点击newButton里的按钮后跳转到列表页，需要用到Link（使用React路由后，就不能使用a标签进行页面跳转，需要借助Link标签完成路由的跳转）

步骤：在newButton中引入Link后用Link标签跳转

newButton.js

importReact,{Component,Fragment}fromreact;

import{Link}fromreact-router-dom;

import{Button}fromantd;

classNewButtonextendsComponent{

render(){

return(

Linkto=/list

Buttontype=primary按钮/Button

/Link

exportdefaultNewButton;

6)跳转页面的过程中，携带参数，如何获取参数，如

classNewButtonextendsComponent{

render(){

return(

Linkto=/list/123

Buttontype=primary按钮/Button

/Link

解决方式：在index.js配置路由部分，给list地址后加一个变量,表示传过来的值为变量id的值

Routepath=/list/:idcomponent={!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--NewList}/

之后在newList组件中打印出console.log(this.props)

可看到params里有变量id