动态路由与静态路由

Question

在Reactive路由器第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的第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，它更符合反应的工作方式。声明式的，基于组件的。有人能用例子来解释吗？

提前感谢！

Answer 1

如果您的应用程序是一堆不同的页面，您将不会注意到react路由器v3和v4之间的差别很大。您将有一个路由器，它是应用程序的许多不同页面之间的切换。react路由器真正闪耀的地方是，您可以将路由器包含在任意组件中。如果您有一个页面/settings，那么当路由器是/settings/additional-content时，可能需要显示一个附加的内容面板。您可以将路由器注入您的SettingsPage，如果路由匹配，则有条件地呈现AdditionalSettingsComponent。相反，react路由器v3需要有两个组件：SettingsPage和SettingsPageAdditionalSettings。

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

从医生那里：

路由组件可能是React路由器中理解和学习良好使用的最重要的组件。它最基本的责任是当一个位置与路由的路径匹配时，呈现一些UI。

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>