路由渲染屬性render、children、component

摘要：在react-router 5.0中，route組件有三個支持組建渲染的屬性：render、children、component

一、render

render 屬性能使你便捷的渲染內聯組件或是嵌套組件，你可以給這個屬性傳入一個函數，當路由的路徑匹配時調用，而不是使用 component 創建一個新的 React 元素。同時，render屬性也會接受所有由route傳入的所有參數。

使用 render 可以方便地進行內聯渲染和包裝，而無需進行上文解釋的不必要的組件重裝。

 

　　//內聯方式
    <Route path="path" render={() => <div>這是內聯組件寫法</div>} />
    //嵌套組合方式
    <Route path="path" render={ props => (
        <ParentComp>
            <Comp {...props} />
        </ParentComp>
    ) />

render 后面跟一個函數 可以獲取到參數 props，注意需要把 props 綁定到后面的組件上面

render={ (props)=>{
               return (
                   <div>
                       <router.component { ...props }> //這里要把props綁定上

 　　　　　　　　　　　　　　　　{ router.children?.map((item,itemIndex)=>{ return ( <Route exact={ item.exact } key={itemIndex} path={item.path} component = { item.component } /> ) }) } </router.component>

這里還可以用render傳參的方式 到父頁面去渲染
最后我們到父頁面，在需要渲染子路由的地方添加這個，就可以把子路由渲染到這里，跟vue的<router-view></router-view>效果一樣

{ this.props.children }

二、children

children 屬性是這三個屬性中比較特殊的一個，它的值為一個函數，當 Route 有 children 屬性時，不管當前的路徑是否與Route匹配，該函數都會執行，同時，children屬性也會接受所有由route傳入的所有參數。

有時候不論 path 是否匹配位置，你都想渲染一些內容。在這種情況下，你可以使用 children 屬性。除了不論是否匹配它都會被調用以外，它的工作原理與 render 完全一樣。
children 渲染方式接收所有與 component和 render 方式相同的 route props，除非路由與 URL 不匹配，不匹配時 match 為 null。這允許你可以根據路由是否匹配動態地調整用戶界面，如果路由匹配，添加一個激活類。

    <Route path="path" children={ props => (
        <div className={props.match? "active": ''}>
            <Link to="path" />
        </div>
    ) />
    

三、component

當你使用component屬性時，router會通過你賦給該屬性的值，使用React.createElement方法去創建一個新的React元素，這意味着如果你給component屬性賦的值是一個內聯函數，那他每次渲染都會創建一個新的組件，這會導致每次渲染都會伴隨新組件的掛載和舊組件的卸載，而不是只是對已存在組件的更新操作。 所以當你要使用內聯函數進行組件渲染時，使用render或children屬性會更合適些。

指定只有當位置匹配時才會渲染的 React 組件，該組件會接收 route props 作為屬性。

const Comp = props => <div>{props.match.params.name}</div>
    
<Route path="path" component={Comp} />

注意：

在使用Route的這三個屬性渲染組件時還有一點值得注意，就是當這三個屬性同時存在時的優先級問題，正常情況下我們基本上使用其中一個屬性就可以了，但當他們同時存在時，優先渲染component的值，其次是render屬性的值，而children屬性的值優先級最低，為了避免 不必要的錯誤，盡量每個Route中只是用他們三個中的其中一個。

component > render > children

頁面渲染注冊路由：

import React,{ Component } from "react";
import { BrowserRouter,Route,Switch } from "react-router-dom";
import './App.css'
import routers from "./router/index";
class App extends Component<any,any>{
  render(): React.ReactNode {
    return (
        <BrowserRouter>
            <Switch>
            {
                routers.map((router,index)=>{
                    return (
                        <Route
                            exact={ router.exact }
                            key={index}
                            path={router.path}
                            render={ (props)=>{
                                return (
                                   <div>
                                       <router.component { ...props }>
                                           {
                                               router.children?.map((item,itemIndex)=>{
                                                   return (
                                                       <Route
                                                           exact={ item.exact }
                                                           key={itemIndex}
                                                           path={item.path}
                                                           component = { item.component }
                                                       />
                                                   )
                                               })
                                           }
                                       </router.component>
                                   </div>
                                )
                            } }
                        />
                    )
                })
            }
            </Switch>
        </BrowserRouter>
    )
  }
}
export default App

路由渲染屬性

你有三個屬性來給 <Route> 渲染組件: component ，render，和 children 。你可以查看 <Route> 文檔 來了解它們的更多信息，但在這我們將重點關注component 和 render 因為這幾乎是你總會用到的兩個。

component 應該在你想渲染現存組件時使用 （ React.Component 或一個無狀態組件）。render，只有在必須將范圍內的變量傳遞給要渲染的組件時才能使用。你不應該使用具有內聯函數的 component 屬性來傳遞范圍內的變量，因為你將要不必要的卸載/重載組件。

const Home = () => <div>Home</div>;

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path="/" component={Home} />
      <Route
        path="/about"
        render={props => <About {...props} extra={someVariable} />}
      />
      {/* do not do this */}
      <Route
        path="/contact"
        component={props => <Contact {...props} extra={someVariable} />}
      />
    </Switch>
  );
};

 

參考來源：https://juejin.cn/post/6844903890370953229