<StaticRouter>

一种永远不会改变 location 的路由。

这个路由会在服务端渲染场景中有用(用户完全没有点击任何链接,因此也没有任何路由改变发生)。同样,他在单元测试场景中也很有用。 下列是一个示例 node 服务器,他会在有上下文 url 时发送 302 状态码,并在其他情况下发送 html

import http from 'http'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router'

http
  .createServer((req, res) => {
    // This context object contains the results of the render
    const context = {}

    const html = ReactDOMServer.renderToString(
      <StaticRouter location={req.url} context={context}>
        <App />
      </StaticRouter>
    )

    // context.url will contain the URL to redirect to if a <Redirect> was used
    if (context.url) {
      res.writeHead(302, {
        Location: context.url
      })
      res.end()
    } else {
      res.write(html)
      res.end()
    }
  })
  .listen(3000)

basename: string

所有导航的路径前缀。basename 属性应该有带有/前缀,但不包括/后缀

<StaticRouter basename="/calendar">
  <Link to="/today"/> // renders <a href="/calendar/today">
</StaticRouter>

location: string

服务端接受到的 url

<StaticRouter location={req.url}>
  <App />
</StaticRouter>

location: object

一个格式类似于 { pathname, search, hash, state }的对象

<StaticRouter location={{ pathname: '/bubblegum' }}>
  <App />
</StaticRouter>

context: object

一个普通的 JavaScript 对象。在渲染期间,组件可以向对象添加属性以存储有关渲染的信息。

<Route>匹配时,它将把上下文对象传递作为 staticContext 属性传给下游组件。查看服务器渲染指南,以获取有关如何自行执行此操作的更多信息。渲染之后,这些属性可用于配置服务器的响应

const context = {}
<StaticRouter context={context}>
  <App />
</StaticRouter>
if (context.status === "404") {
  // ...
}

children: node

要渲染的组件

注:react<16 中你只能包括一个子节点,因为 render 方法不能返回超过一个的根节点。如果你需要多个根节点,你只需要把他们包裹在一个<div>

最后修改时间: 50 seconds ago