React Router v5.1.x中的新功能

時間 2020-01-05

標籤 react router v5.1.x 功能欄目 React 简体版

原文原文鏈接

前言

React Router v5.1.x中的新功能的介紹react

useParams

useParams能夠幫助咱們。在各層組件中，輕鬆訪問router的params參數。web

<= V5.0

在V5.1版本以前，咱們須要經過props.match獲取路由參數。對於更深層的組件還須要使用高階組件withRouter。編程

const Detail = (props) => {
  const { match: { params } } = props
  const { id } = params
  return (
    <div> params id: { id } <DetailTips/> </div>
  )
}
// 須要使用高階組件withRouter
const DetailTips = withRouter((props) => {
  const { match: { params } } = props
  const { id } = params
  return (
    <div>params id: { id }</div>
  )
})
function App() {
  return (
    <div className="App"> <Router> <Switch> <Route path="/detail/:id" component={Detail}/> </Switch> </Router> </div> ); } 複製代碼

V5.1

在V5.1版本中，因爲useParams的引入，咱們能夠輕鬆獲取路由參數。對於更深層的組件，也不須要藉助高階組件withRouter，幫助咱們拿到路由參數。react-router

const Detail = () => {
  const { id } = useParams()
  return (
    <div> params id: { id } <DetailTips/> </div>
  )
}
// 不須要使用高階組件withRouter
const DetailTips = () => {
  const { id } = useParams()
  return (
    <div>params id: { id }</div>
  )
}
function App() {
  return (
    <div className="App"> <Router> <Switch> <Route path="/detail/:id" component={Detail}/> </Switch> </Router> </div> ) } 複製代碼

useLocation

useLocation能夠幫助咱們。在各層組件中，輕鬆獲取location對象。在V5.1版本以前，咱們須要使用props.location。而對於更深層的組件，還須要使用withRouter。函數

<= V5.0

const Detail = (props) => {
  const { location: { pathname } } = props
  return (
    <div> pathname: { pathname } <DetailTips/> </div>
  )
}
// 須要使用高階組件withRouter
const DetailTips = withRouter((props) => {
  const { location: { pathname } } = props
  return (
    <div>pathname: { pathname }</div>
  )
})
function App() {
  return (
    <div className="App"> <Router> <Switch> <Route path="/detail/:id" component={Detail}/> </Switch> </Router> </div> ); } 複製代碼

V5.1

const Detail = (props) => {
  const { pathname } = useLocation()
  return (
    <div> pathname: { pathname } <DetailTips/> </div>
  )
}
// 不須要使用高階組件withRouter
const DetailTips = (props) => {
  const { pathname } = useLocation()
  return (
    <div>pathname: { pathname }</div>
  )
}
function App() {
  return (
    <div className="App"> <Router> <Switch> <Route path="/detail/:id" component={Detail}/> </Switch> </Router> </div> ); } 複製代碼

useHistory

useHistory能夠幫助咱們訪問history對象，進行編程式的導航。spa

const Home = () => {
  return (
    <div>Home</div>
  )
}
const Detail = () => {
  const history = useHistory()
  return (
    <div> <button onClick={() => { history.push('/')}}>go home</button> </div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/detail/:id" component={Detail}/>
        </Switch>
      </Router>
    </div>
  );
}
複製代碼

useRouteMatch

useRouteMatch，接受一個path字符串做爲參數。當參數的path與當前的路徑相匹配時，useRouteMatch會返回match對象，不然返回null。code

useRouteMatch在對於一些，不是路由級別的組件。可是組件自身的顯隱卻和當前路徑相關的組件時，很是有用。component

好比，你在作一個後臺管理系統時，網頁的Header只會在登陸頁顯示，登陸完成後不須要顯示，這種場景下就能夠用到useRouteMatch。router

<= V5.0

const Home = () => {
  return (
    <div>Home</div>
  )
}
// Header組件只會在匹配`/detail/:id`時出現
const Header = () => {
  return (
    <Route
      path="/detail/:id"
      strict
      sensitive
      render={({ match }) => {
        return match && <div>Header</div>
      }}
    />
  )
}
const Detail = () => {
  return (
    <div>Detail</div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Header/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/detail/:id" component={Detail}/> 
        </Switch>
      </Router>
    </div>
  );
}
複製代碼

V5.1

const Home = () => {
  return (
    <div>Home</div>
  )
}
// Header組件只會在匹配`/detail/:id`時出現
const Header = () => {
  // 只有當前路徑匹配`/detail/:id`時，match不爲null
  const match = useRouteMatch('/detail/:id')
  return (
    match && <div>Header</div>
  )
}
const Detail = () => {
  return (
    <div>Detail</div>
  )
}
function App() {
  return (
    <div className="App">
      <Router>
        <Header/>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/detail/:id" component={Detail}/> 
        </Switch>
      </Router>
    </div>
  );
}
複製代碼

其餘

Link和NavLink組件的`to`屬性支持函數

function App() {
  return (
    <div className="App"> <Router> {/* 函數的返回值等於Link的to跳轉的位置 */} <Link to={ (location) => { return `${location.pathname}?sort=age` } }>go</Link> </Router> </div>
  );
}
複製代碼