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将非常有用。

从文档中

Route组件可能是React Router中了解和学习使用的最重要组件。其最基本的职责是当位置与路线的路径匹配时呈现一些用户界面。

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中的动态路由与静态路由

1 个答案: