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 id='heads'/>//頭部固定組件
      <Layout.Content id='main'>
      <RouterIndex/>//中間使用路由渲染
      </Layout.Content>
      <Com_footer id='footers'/>//底部固定組件
      </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} 
id={`${ulClassN==''?'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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！