react 路由Link配置

╰+哭是因爲堅強的太久メ 2021-07-24 23:25 585阅读 0赞

1、Link的to属性
    		(1)放置路由路径
    		(2)放置对象,且为规定格式
    			{pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}}
    		
    			会自动将pathname、search、hash拼接在url路径上,state为传入的参数
    			可通过输出props查看对象内的信息
    			this.props.location.state.键名获取state内的数据
    
    2、Link的replace属性
    	添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈
    
    3、Link传参
    	在to路径后添加"/键值"
    	在路由route,path路径后添加"/:键名"
    	在组件中,函数式组件:先传入props形参,然后props.match.params.键名
    			类组件:this.props.match.params.键名

代码示例:

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(props)
    { 
      console.log(props)
      return(
          <div>admin我的</div>
        )
    }
    
    function Product(props)
    { 
      return(
          <div>admin产品页面:{ props.match.params.id}</div>
        )
    }
    
    export default class App extends Component{ 
    	  constructor()
        { 
          super();
        }
        render()
        { 
        { /*若将路径写成对象形式,且和下面相同,会自动将pathname、search、hash自动拼接在url路径上,state为传入组件的数据*/}
          let obj={ pathname:"/me",search:'?username=admin',hash:"#abc",state:{ msg:'hello'}}
          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/123'>Product</Link>
                      { /*可在对应的组件中输出props查看传入的对象的信息,添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈*/}
                        <Link to={ obj} replace>个人中心</Link>
                    </div>
    
                    <Route path="/" exact component={ Home}></Route>
                    <Route path="/product/:id"  component={ Product}></Route>
                    <Route path="/me" exact component={ Me}></Route>
                </div>
              </Router>
    
            </div>
            
          )
        }
    
    }