React-Router基础
还是先用脚手架生成一个app，删除多余的代码，只留一个index.js
安装react-router-dom：
npm install --save react-router-dom
老套路，先编写一个简单的路由程序先跑起来：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function Index() {
return JSPang.com
;
}
function List() {
return List-Page
;
}
function AppRouter() {
return (
- 首页
- 列表
);
}
export default AppRouter;
这里的两个组件用function的方式写，实际工作中要写在另一个文件夹里：
编写index：
import React, { Component } from 'react';
class Index extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( JSPang.com
);
}
}
export default Index;
编写list：
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( List Page
);
}
}
export default List;
在主页面里引入即可：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'
function AppRouter() {
return (
- 首页
- 列表
);
}
export default AppRouter;
exact：就是精准匹配的意思，就是表面的意思，必须完全相同才能匹配出路径
route里的动态传值是允许的，：开始，紧接着要传的值即可：
列表
在list组件上接收并显示传递值：挂载组件后用this.props.match接收传来的值。
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( List Page
);
}
//-关键代码---------start
componentDidMount(){
console.log(this.props.match)
}
//-关键艾玛---------end
}
export default List;
console.log(this.props.match)控制台打印出的这个对象，有三个部分的值
- patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。
- url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
- params：传递过来的参数，
key和value值
那接收主页面传来的id，按如下代码接收：
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( List Page->{this.state.id}
);
}
componentDidMount(){
// console.log(this.props.match.params.id)
let tempId=this.props.match.params.id
this.setState({id:tempId })
}
}
export default List;
写一个列表数组，模拟从后台读取数据：
constructor(props) {
super(props);
this.state = {
list:[
{uid:123,title:'技术胖的个人博客-1'},
{uid:456,title:'技术胖的个人博客-2'},
{uid:789,title:'技术胖的个人博客-3'},
]
}
}
在列表组件里进行有效的遍历：
render() {
return (
{
this.state.list.map((item,index)=>{
return (
- {item.title}
)
})
}
)
}
把link to里的内容解析成js形式，如下：
render() {
return (
{
this.state.list.map((item,index)=>{
return (
-
{item.title}
)
})
}
)
}
全部代码：
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Index extends Component {
constructor(props) {
super(props);
this.state = {
list:[
{uid:123,title:'技术胖的个人博客-1'},
{uid:456,title:'技术胖的个人博客-2'},
{uid:789,title:'技术胖的个人博客-3'},
]
}
}
render() {
return (
{
this.state.list.map((item,index)=>{
return (
-
{item.title}
)
})
}
)
}
}
export default Index;
关于ReactRouter的重定向：Redirect分两种
- 标签式重定向:就是利用
- 编程式重定向:这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功跳转到会员中心页面
跳转和重定向的区别：重定向是不可以按浏览器回退按钮的，而跳转可以。
重点，二级导航video组件的编写：link链接与对应的组件。
import React from "react";
import { Route, Link } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'
function Video(){
return (
- React教程
- Vue教程
- Flutter教程
视频教程
写完以上的，再在AppRouter.js（入口文件）里引入该组件：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
//--关键代码------------start
import Video from './Pages/Video'
//--关键代码------------end
import './index.css'
function AppRouter() {
return (
一级导航
- 博客首页
{/*--关键代码------------start*/}
- 视频教程
{/*--关键代码------------end*/}
- 职场技能
);
}
export default AppRouter;
动态路由的实现无非是：后台读取数据，把原来写死的改为变量的形式。
举个栗子：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'
function AppRouter() {
let routeConfig =[
{path:'/',title:'博客首页',exact:true,component:Index},
{path:'/video/',title:'视频教程',exact:false,component:Video},
{path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
]
return (
一级导航
{
routeConfig.map((item,index)=>{
return (- {item.title}
)
})
}
{
routeConfig.map((item,index)=>{
return (
);
}
export default AppRouter;
嘿嘿，这里的路由入门就先到这里了。接下来搞大名鼎鼎的hook。