35_2种路由的跳转方式
写路由步骤：
1.定义路由组件
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。2.父路由组件重写《link》 或《NavLink》标签或《Route》(可能会有《Switch》和《Redirect》)
项目目录：
代码：
import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import About from '../views/about'
import Home from '../views/home';
import MyNavLink from './my-nav-link'
export default class App extends Component {
render() {
return (
<div>
<div className='row'>
<div className='col-xs-8 col-xs-offset-2'>
<div className='page-header'>
<h2>React Router Demo</h2>
</div>
</div>
</div>
<div className='row'>
<div className='col-xs-2 col-xs-offset-2'>
<div className='list-group'>
<MyNavLink className='list-group-item' to='/about'>about</MyNavLink>
<MyNavLink className='list-group-item' to='/home'>home</MyNavLink>
</div>
</div>
<div className='col-xs-6'>
<div className='panel'>
<div className='panel-body'>
<Switch>
<Route path='/about' component={About}/>
<Route path='/home' component={Home}/>
<Redirect to='/home'/>
</Switch>
</div>
</div>
</div>
</div>
</div>
);
}
}
app.jsx
import React, {Component} from 'react'
import {NavLink} from 'react-router-dom'
export default class MyNavLink extends Component {
render() {
//...this.props
//将外部传入的所有属性传递给NavLink
return <NavLink {...this.props} activeClassName='activeClass'/>
//用MyNavLink的人相当于用NavLink
}
}
my-nav-link.jsx
import React, {Component} from 'react'
export default class About extends Component {
render() {
return (
<div>
about route component
</div>
)
}
}
about.jsx
import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import MyNavLink from '../components/my-nav-link'
import News from './news'
import Message from './message'
export default class Home extends Component {
render() {
return (
<div>
<h2>home route component</h2>
<div>
<ul className='nav nav-tabs'>
<li>
<MyNavLink to='/home/news'>News</MyNavLink>
</li>
<li>
<MyNavLink to='/home/message'>Message</MyNavLink>
</li>
</ul>
<div>
<Switch>
<Route path='/home/news' component={News}/>
<Route path='/home/message' component={Message}/>
<Redirect to='/home/news'/>
</Switch>
</div>
</div>
</div>
)
}
}
home.jsx
import React, {Component} from 'react'
import {Route} from 'react-router-dom'
import MessageDetail from './message-detail';
import MyNavLink from "../components/my-nav-link";
export default class Message extends Component {
state = {
messages: []
}
componentDidMount() {
//模拟发送ajax请求，异步获取数据
setTimeout(() => {
const messages = [
{id: 1, title: 'message001'},
{id: 3, title: 'message003'},
{id: 5, title: 'message005'},
{id: 6, title: 'message006'},
]
// 更新状态
this.setState({messages})
}, 1000)
}
/*
* 两种跳转路由的方式 push和replace
* */
showDetail = (id) => {
this.props.history.push(`/home/message/messagedetail/${id}`)
}
showDetail2 = (id) => {
this.props.history.replace(`/home/message/messagedetail/${id}`)
}
back = () => {
this.props.history.goBack();
}
forward = () => {
this.props.history.goForward()
}
/*
* 通过js进行页面跳转
* */
reqPage = () => {
window.location = 'http://www.baidu.com'
}
render() {
return (
<div>
<ul>
{
this.state.messages.map((m, index) => (
<li key={index}>
<MyNavLink to={`/home/message/messagedetail/${m.id}`}>{m.title}</MyNavLink>
<button onClick={() => {
this.showDetail(m.id)
}}>push查看
</button>
<button onClick={() => {
this.showDetail2(m.id)
}}>replace查看
</button>
</li>
))
}
</ul>
<p>
<button onClick={this.back}>回退</button>
<button onClick={this.forward}>前进</button>
</p>
<p>
<button onClick={this.reqPage}>页面跳转</button>
</p>
{/*:id代表必须传一个参数,既是占位符，也是标识名称*/}
<Route path='/home/message/messagedetail/:id' component={MessageDetail}/>
</div>
)
}
}
message.jsx
import React from 'react' const allMessage = [ {id: 1, title: 'message001', content: '我爱你，中国'}, {id: 3, title: 'message003', content: '我爱你，老婆'}, {id: 5, title: 'message005', content: '我爱你，孩子'}, {id: 6, title: 'message006', content: '我爱你，父母'}, ] export default function MessageDetail(props) { console.log(props) // 得到请求中参数的id const {id} = props.match.params //查询得到对应的message const message = allMessage.find(//返回第一个结果为true的数组元素 //哪一个m对应上了m.id===id 则结果为true，就是find的结果 (m) => m.id === id * 1 ); return ( <ul> <li>ID:{message.id}</li> <li>TITLE:{message.title}</li> <li>CONTENT:{message.content}</li> </ul> ) }message-detail.jsx
import React, {Component} from 'react'
export default class News extends Component {
state = {
newsArr: [
'news111',
'news222',
'news333',
'news444',
]
}
render() {
return (
<ul>
{
this.state.newsArr.map((c, index) => <li key={index}>{c}</li>)
}
</ul>
)
}
}
news.jsx
更多精彩
