Route组件

react-router之Route组件

本文内容整理参考借鉴以下文章：
https://www.jianshu.com/p/6583b7258e78
https://reacttraining.com/react-router/web/api/BrowserRouter

在此以表感谢！

Route

路由组件(Route)可能是React路由器中最重要的组件，可以帮助您更好地理解和学习使用。它最基本的职责是在其路径与当前URL匹配时渲染一些UI。

import React from "react";
import ReactDOM from "react-dom";
import {
    BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/news">
        <NewsFeed />
      </Route>
    </div>
  </Router>,
  node
);

1- Route render methods

使用Route渲染某些内容的推荐方法是使用children元素。不过，还有一些其他方法可用于渲染具有Route的对象。这些主要是为支持在引入hook之前使用早期版本的路由器构建的应用程序而提供的。

• component

1–component的值是一个组件，当URL和Route匹配时，Component属性定义的组件就会被渲染。
2–当你使用component（来代替render或children）时，路由器使用React.createElement方法从给定的组件中创建一个新的React元素。这意味着，如果为component属性提供一个内联函数，则每次渲染都将创建一个新组件。这将导致现有组件卸载和新组件装载，而不仅仅只是更新现有组件。当使用内联函数进行内联渲染时，请使用render或children属性。

<Route path="/MyPage" component={
   MyPage} >

• render：function类型

1–Route会渲染这个function的返回值。因此它的作用就是附加一些额外的逻辑。
2–render允许方便的内联渲染和包装，而不必进行上述(component)不必要的重新安装。

<Route path="/home" render={
   () => {
   
    console<