Новое в React Router v5.1.x

React.js
Новое в React Router v5.1.x

предисловие

Введение в то, что нового в React Router v5.1.x

vvv

useParams

useParamsможет помочь нам. В каждом компоненте уровня можно легко получить доступ к параметру params маршрутизатора.

<= 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, чтобы помочь нам получить параметры маршрутизации.

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может помочь нам. В каждом слое компонентов легко получить объект местоположения. До 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Может помочь нам получить доступ к объекту истории для программной навигации.

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 вернет объект соответствия, в противном случае он вернет null.

useRouteMatchДля некоторых компонентов не уровня маршрута. Однако очень полезно, когда собственное отображение компонента связано с компонентом текущего пути.

Например, когда вы создаете фоновую систему управления, заголовок веб-страницы будет отображаться только на странице входа в систему, и его не нужно отображать после завершения входа в систему, его можно использовать в этом сценарии.useRouteMatch.

<= 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 и NavLinktoфункции поддержки атрибутов


function App() {
  return (
    <div className="App">
      <Router>
        {/* 函数的返回值等于Link的to跳转的位置 */}
        <Link to={
          (location) => {
            return `${location.pathname}?sort=age`
          }
        }>go</Link>
      </Router>
    </div>
  );
}

Ссылаться на

Категории