React Router组件和渲染之间的区别

路由器

React Router是一个用于构建单页应用程序的库。它提供了一种在React应用程序中实现路由的方式，使得我们可以根据URL的变化来渲染不同的组件。在React Router中，有两个重要的概念，即路由器（Router）和路由（Route）。

路由器是React Router的根组件，它负责监听URL的变化并决定渲染哪个组件。我们需要在应用程序的根组件中使用路由器组件来包裹整个应用。例如，我们可以使用BrowserRouter组件来创建一个基于浏览器历史记录的路由器：

Javascript
import { BrowserRouter } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      {/* 应用程序的其他组件 */}
    </BrowserRouter>
  );
}

路由器提供了一些配置选项，例如basename和forceRefresh，可以用来自定义路由器的行为。但是最常用的配置选项是history，它决定了我们要使用哪种历史记录实现，例如使用HTML5的history API或hash路由。

路由是React Router中的另一个重要概念。路由组件用来定义URL与组件之间的映射关系。我们可以在路由器组件内部使用Route组件来定义不同的路由。一个简单的例子如下：

Javascript
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

在上面的例子中，我们定义了两个路由，一个是根路径/对应的是Home组件，另一个是/about对应的是About组件。当URL匹配到某个路由时，对应的组件就会被渲染到页面上。

使用React Router组件和渲染之间的区别

在React Router中，有两种方式来渲染组件，一种是使用组件属性（component prop），另一种是使用render属性（render prop）。这两种方式在使用上有一些差异，我们需要根据具体的需求来选择。

当我们使用component属性时，React Router会自动将路由匹配到的组件渲染到页面上。这种方式非常方便，适用于简单的组件渲染场景。例如，我们可以在上面的例子中使用component属性来定义路由：

Javascript
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

当URL匹配到/时，React Router会渲染Home组件；当URL匹配到/about时，React Router会渲染About组件。

但是有时候我们需要在渲染组件之前进行一些逻辑判断或数据处理。这时候就可以使用render属性来定义路由。render属性接收一个函数，这个函数返回一个React元素，用来渲染组件。在render函数中，我们可以进行一些逻辑判断，然后根据情况来渲染不同的组件。例如：

Javascript
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" render={() => (
        isLoggedIn ? <Dashboard /> : <Login />
      )} />
    </BrowserRouter>
  );
}

在上面的例子中，我们根据用户是否已登录来决定渲染哪个组件。如果用户已登录，就渲染Dashboard组件；如果用户未登录，就渲染Login组件。

React Router是一个非常强大的库，它提供了一种方便的方式来实现路由功能。通过使用路由器和路由组件，我们可以根据URL的变化来渲染不同的组件。在React Router中，我们可以使用component属性和render属性来定义路由，根据具体的需求来选择合适的方式。无论是简单的组件渲染还是复杂的逻辑判断，React Router都可以满足我们的需求。