React 中的动态路由与静态路由

Question

在 React Router 版本 4 之前，据说您会静态建立路由作为应用程序初始化过程的一部分。

// routes.js

const routes = (
  <Router>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' component={Prompt} />
      <Route path='playerTwo/:playerOne' component={Prompt} />
      <Route path='battle' component={ConfirmBattle} />
      <Route path='results' component={Results} />
      <Route onEnter={checkAuth} path='dashboard' component={Dashboard} />
    </Route>
  </Router>
)

export default routes

当您初始化您的应用程序时，您将导入您的路线并呈现它们。

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import routes from './config/routes'

ReactDOM.render(routes, document.getElementById('app'))

今天，在 React-Router 的第 4 版中，您可以执行以下操作：

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom'

const Home = () => (
  <h2>Home</h2>
)

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Route path='/' component={Home} />
        </div>
      </Router>
    )
  }
}

export default App

我不确定我是否能看出差异或理解差异。也有人说，现在在 V4 中，它更符合 React 的工作方式。声明式的，基于组件的。有人可以举例说明吗？

提前致谢！

Answer 1

如果你的应用程序是一堆不同的页面，你不会注意到 react-router v3 和 v4 之间有太大区别。您将拥有一个路由器，它是应用程序的许多不同页面之间的切换器。 react-router 真正出色的地方在于您可以将路由器包含在任意组件中。如果您有一个页面 /settings，也许您想在路由器为 /settings/additional-content 时显示一个额外的内容面板。您可以将路由器注入 SettingsPage，并在路由匹配时有条件地呈现 AdditionalSettingsComponent。相反，react-router v3 需要你有两个组件：SettingsPage 和 SettingsPageAdditionalSettings.

在 react-router v3 中，您必须在一个地方声明所有路由，因此您无法选择将应用程序的某些部分渲染到最细粒度的级别。同样，如果您的应用程序是一堆不同的页面，您将看不到这个优势。但是，如果您的应用程序包含的页面包含可能会或可能不会根据 url 呈现的组件，那么 react-router v4 将非常有用。

来自文档：

The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when a location matches the route’s path.

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

如果应用程序的位置是 /，那么 UI 层次结构将类似于：

<div>
  <Home/>
  <!-- react-empty: 2 -->
</div>

如果应用程序的位置是 /news，那么 UI 层次结构将是：

<div>
  <!-- react-empty: 1 -->
  <NewsFeed/>
</div>

React 中的动态路由与静态路由

Dynamic Routing vs. Static routing in React

reactjs

react-router-v4