赋予代码灵魂 , 追求极致性能

Hey guys, Here is Vtrois's Blog !

React Router Config API使用分析

1. API:matchRoutes(routes, pathname)
  import { matchRoutes } from 'react-router-config'
  const branch = matchRoutes(routes, '/child/23')
  //使用上面前面的路由,branch将如下数组
 // [
 //   routes[0],
 //   routes[0].routes[1]
 // ]


2.API:renderRoutes(routes, extraProps = {})
为了保证匹配的外部matchroutes和内部的渲染在同一分支的渲染结果,你必须在你的组件内使用  
renderRoutes而不是<Route>,你可以依然使用<Route>,但是它将不会被matchRoutes的外部渲  
染。
const Root = ({ route }) => (
  <div>
    <h1>Root</h1>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes)}
  </div>
)

const Home = ({ route }) => (
  <div>
    <h2>Home</h2>
  </div>
)

const Child = ({ route }) => (
  <div>
    <h2>Child</h2>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes, { someProp: 'these extra props are optional' })}
  </div>
)

const GrandChild = ({ someProp }) => (
  <div>
    <h3>Grand Child</h3>
    <div>{someProp}</div>
  </div>
)


ReactDOM.render((
  <BrowserRouter>
    {/* kick it all off with the root route */}
    {renderRoutes(routes)}
  </BrowserRouter>
), document.getElementById('root'))
点赞

发表评论

电子邮件地址不会被公开。