React-Router V5 嚐鮮🍉🍉

新特性

• 完全兼容老版本v4
• 支持 React 16 , 兼容 React >= 15
• 消除在 React.StrictMode 嚴格模式中的警告
• 使用 create-react-context 實現 context API

新功能

• Route 組件 path 可以爲數組

  • before

    <Switch>
      <Route path="/users/:id" component={User} />
      <Route path="/profile/:id" component={User} />
    </Switch>

  • after

    <Route path={["/users/:id", "/profile/:id"]} component={User} />

• 支持 React.createRef in <Link innerRef>

  • 舉個栗子

    // 通過以下方式可以獲取到 Link 組件對應的 DOM 元素
    this.createRef = React.createRef();
    
    <Link to="/home" innerRef={this.createRef}>home</Link>

• 支持 React.forwardRef in <Route component>

  • 舉個栗子

    <Route path="/home" component={Home}/>
    
    // Home 組件
    export default React.forwardRef((props, ref) => {
      // 純函數組件也能獲取到 ref (當前 Home 組件對應的 DOM 元素)
      console.log(props, ref);
      return <h2>Home</h2>
    })

以上功能是 v4 沒有的功能，而在 v5 新增的。

什麼？還想知道更多內幕消息？關注這個博客吧 --> 博客傳送門