react 路由4.x

柔光的暖阳◎ 2021-07-24 19:09 428阅读 0赞

1、安装
    	cnpm install -S  react-router-dom@4.3.1
    2、引入
    	import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
    	
    	可以使用as xx重命名BrowserRouter
    3、BrowserRouter可以有多个,但其中的路由只能是一个或用一个根容器包裹多个路由
    
    	其中BrowserRouter属性：
    		basename='/路径'
    		添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,
    		所以使用原本路由路径和加了/xx的路由路径都能匹配该路由
    
    4、路由中的组件route中的component={中},除了可以放置组件显示路由内容,还可以
    	通过函数返回html内容来显示路由内容,因为组件也是返回html内容,故可以直接通过函数返
    	回html内容充当组件,但不能直接写html内容
    	
    		如:
    		 <Route path="/product"  component={()=><div>product</div>}></Route>
    		 <Route path="/" component={function(){return <div>首页2</div>}}></Route>

代码示例:

import React,{ Component} from 'react'
    //import {Route,BrowserRouter,Link} from 'react-router-dom'
    //将BrowserRouter重命名为Router
    import { BrowserRouter as Router,Link,Route} from 'react-router-dom'
    import {  Button } from 'antd';
    import './App.css';
    
    function Home()
    { 
      return(
          <div>admin首页</div>
        )
    }
    
    function Me()
    { 
      return(
          <div>admin我的</div>
        )
    }
    
    function Product()
    { 
      return(
          <div>admin产品页面</div>
        )
    }
    
    export default class App extends Component{ 
    	  constructor()
        { 
          super();
        }
        render()
        { 
          return(
            <div id='app'>
          { /*BrowserRouter可以放多个*/}
              <Router>
            
            { /*因为组件也是返回html内容,故可以直接通过函数返回html内容充当组件,但不能直接写html内容*/}
              <div>  
                <Route path="/"  exact component={ ()=><div>首页</div>}></Route>
                <Route path="/product"  component={ ()=><div>product</div>}></Route>
                <Route path="/me"  component={ ()=><div>me</div>}></Route>
              </div>
              { /*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/}
    
              </Router>
            
    
              
              { /*BrowserRouter内部只能有一个根容器,包裹其他内容*/}
            { /*添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,所以使用路由路径和加了admin的路由路径都能匹配该路由*/}
              <Router basename='/admin'>
                <div>
                    <div className='nav'>
                        <Link to='/'>Home</Link>
                        <Link to='/product'>Product</Link>
                        <Link to='/me'>个人中心</Link>
                    </div>
    
                    <Route path="/" exact component={ Home}></Route>
                    <Route path="/product"  component={ Product}></Route>
                    <Route path="/me" exact component={ Me}></Route>
                </div>
              </Router>
    
            </div>
            
          )
        }
    
    }