react一看就会的简单路由设置
不管是vue还是react 这种单页面的框架一定都少不了路由
下面给大家讲讲在实际项目中react的路由设置
第一步：
在src目录下新建一个目录route 在该目录下新建一个index.js用于管理路由
如:
import React ,{ Component } from 'react'
import {Switch,Route,Redirect} from 'react-router-dom'
import FristIndex from '../view/index/index'
import About from '../view/about/index'
import Book from '../view/book/index'
import Detail from '../view/detail/index'
import User from '../view/user/index'
class RouterIndex extends Component{
render(){
return(
<Switch>//switch用于匹配路由path
<Route path='/' exact render={()=>(//exact是用于精准匹配，这里是定义了路由重定向，意思是当我们进入"/"时会重定向到“/index”
<Redirect to='/index'/>
)}/>
<Route path='/index' component={FristIndex}/>
<Route path='/about' component={About}/>
<Route path='/book' component={Book} />
<Route path='/detail/:id' component={Detail}/>//注意这里的:id是为url设置参数 我们可以在detail组件下通过this.props.match.params.id获得
<Route path='/user/:id' component={User}/>
</Switch>
)
}
}
export default RouterIndex
第二步：
在src根目录下的顶层组件App.js中渲染第一步设置好的路由
import React, { Component } from 'react';
import { Popconfirm, message, Button ,Layout} from 'antd';
import RouterIndex from'./route/index';//引入路由管理js
import Com_head from './view/Com_head';
import Com_footer from './view/Com_footer';
require('./view/index.css')
class App extends Component {
render() {
return (
<div className='pageBox'>
<Com_head />//头部固定组件
<Layout.Content >
<RouterIndex/>//中间使用路由渲染
</Layout.Content>
<Com_footer />//底部固定组件
</div>
);
}
}
export default App;
第三步：
经过以上两步，我们就可以在具体的界面组件中通过Link 进行路由跳转了！
如：
import React from 'react'
import { Row,Col,Menu } from 'antd'//这里的antd为阿里封装的react组件库 Row /Col相当于bootstrap中栅格系统Menu相当于UL具体的可以参考ant.design官网
import {Link} from 'react-router-dom'
export default class Nav extends React.Component{
state = {
current: 'math',
}
handleClick = (e)=>{
this.setState({
current:e.key
})
}
render(){
const { classN,mdval,xsval,ulClassN,modeval } = this.props.pram
return(
<Col className={classN} md={mdval} xs={xsval}>
<Menu
className={ulClassN}
mode={modeval}
'?'xsNav':''}`}
onClick={this.handleClick}
selectedKeys = {[this.state.current]}
>
<Menu.Item key="math">
<Link to='/book/math'>数学</Link>
</Menu.Item>
<Menu.Item key="china">
<Link to='/book/china'>语文</Link>
</Menu.Item>
<Menu.Item key="pe">
<Link to='/book/pe'>体育</Link>
</Menu.Item>
<Menu.Item key="print">
<Link to='/book/print'>美术</Link>
</Menu.Item>
</Menu>
</Col>
)
}
}
---------------------
作者：永远在追求
来源：CSDN
原文：https://blog.csdn.net/weixin_41421227/article/details/80875807
版权声明：本文为博主原创文章，转载请附上博文链接！