首先，您应该阅读本网站：
https://v5.reactrouter.com/web/api/Route
但要解释的是，这里有三件事，前两个是使用以前版本的react-router（v5之前）的路由示例，第三个是react-router（v5 -当前）推荐的方法。

1.带组件路由

<Route path="/coolPath" component={MyComponent} />

这种类型的路由渲染传递到 prop 的单个组件。如果将内联函数传递给Route的component prop，它将通过使用React.createElement在每次渲染时卸载并重新挂载组件。这可能是低效的，并且通过此方法传递自定义props只能通过内联函数。React Router的作者建议使用render prop而不是component prop来处理内联函数，如下所示。

2. render路由

<Route path="/coolPath" render={props => <MyComponent {...props} customProp="s" } />

这个路由类型不是使用组件prop和内联函数为您创建一个新的React元素，而是在位置匹配时传递一个函数，并且在重新渲染期间不会卸载组件并重新安装一个全新的组件。通过这个方法传递自定义prop也容易得多。

3.子节点路由

<Route path="/coolPath">
    <MyComponent customProp="s" />
</Route>

这是当前推荐的路由方法，当路由器匹配路径时，将呈现子组件。用这个方法传递自定义 prop 也很容易。
请记住，还有第四种类型，即：

4.以儿童为功能的路线

来自reacttraining.com:

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

function ListItemLink({ to, ...rest }) {
  return (
    <Route
      path={to}
      children={({ match }) => (
        <li className={match ? "active" : ""}>
          <Link to={to} {...rest} />
        </li>
      )}
    />
  );
}

ReactDOM.render(
  <Router>
    <ul>
      <ListItemLink to="/somewhere" />
      <ListItemLink to="/somewhere-else" />
    </ul>
  </Router>,
  node
);

有时需要渲染路径是否与位置匹配。在这些情况下，可以使用children prop函数。它的工作方式与render完全相同，只是无论是否存在匹配，都会调用它。