如何理解react路由Link配置

如何理解react路由Link配置，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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>
        
      )
    }
}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。