Reactjs 警告：失败的propType:未在“RouterContext”中指定所需的prop“router”`_Reactjs_Webpack_React Router

Reactjs 警告：失败的propType:未在“RouterContext”中指定所需的prop“router”`

reactjs webpack

Reactjs 警告：失败的propType:未在“RouterContext”中指定所需的prop“router”`,reactjs,webpack,react-router,Reactjs,Webpack,React Router,我已经工作了几天，使用react、react router和webpack的组合来建立和运行静态站点样板文件。不幸的是，我一直很难找到bug的来源。要生成静态页面，我正在运行webpack--progress--colors--display error details--bail，这将导致以下输出（react警告可能在渲染时发出）： Router.jsx： import React from 'react' import Index from './Index' import routes f

我已经工作了几天，使用react、react router和webpack的组合来建立和运行静态站点样板文件。不幸的是，我一直很难找到bug的来源。要生成静态页面，我正在运行

webpack--progress--colors--display error details--bail

，这将导致以下输出（react警告可能在渲染时发出）：

Router.jsx：

import React from 'react'
import Index from './Index'
import routes from './routes'
import ReactDOM from 'react-dom'
import ReactDOMServer from 'react-dom/server'
import {Router, RouterContext, match, browserHistory, createMemoryHistory} from 'react-router'

const createElement = (Component, props) => {
  return <Component {...props} />
}

if (typeof document !== "undefined") {
  ReactDOM.render((
    <Router createElement={createElement} history={browserHistory}>
      {routes}
    </Router>), 
    document.getElementById('app'))
}

export default ({assets, path}, callback) => {
  const location = createMemoryHistory().createLocation(path)

  match({routes, location}, (err, redirectLocation, renderProps) => {
    if (err) {
      throw new Error(err)
    }

    const html = ReactDOMServer.renderToStaticMarkup(
      <Index assets={assets}>
        <RouterContext {...renderProps} />
      </Index>
    )

    callback(null, `<!DOCTYPE html>${html}`)
  })
}

从“React”导入React
从“./Index”导入索引
从“/routes”导入路由
从“react dom”导入react dom
从“react dom/server”导入ReactDOMServer
从“react Router”导入{Router，RouterContext，match，browserHistory，createMemoryHistory}
const createElement=（组件、道具）=>{
返回
}
if（文档类型！=“未定义”）{
ReactDOM.render((
{routes}
), 
document.getElementById（'app'））
}
导出默认值（{assets，path}，callback）=>{
const location=createMemoryHistory（）.createLocation（路径）
匹配（{routes，location}，（err，redirectLocation，renderProps）=>{
如果（错误）{
抛出新错误（err）
}
const html=ReactDOMServer.renderToStaticMarkup(
)
回调（null，`${html}`）
})
}

Routes.jsx：

import React from 'react'
import Index from './Index'
import Simon from './Components/Simon'
import Landing from './Components/Landing'
import Pomodoro from './Components/Pomodoro'
import NotFound from './Components/NotFound'
import TicTacToe from './Components/TicTacToe'
import Calculator from './Components/Calculator'
import {IndexRoute, Route, Router} from 'react-router'

const routes = (
  <Router>
    <Route path="/" components={Index}>
      <IndexRoute components={Landing}/>
      <Route path="/Simon" components={Simon}/>
      <Route path="/Pomodoro" components={Pomodoro}/>
      <Route path="/TicTacToe" components={TicTacToe}/>
      <Route path="/Calculator " components={Calculator}/>
      <Route path="*" components={NotFound}/>
    </Route>
  </Router>
)

export {routes};

从“React”导入React
从“./Index”导入索引
从“./Components/Simon”导入Simon
从“./Components/Landing”导入平台
从“./Components/Pomodoro”导入Pomodoro
从“./Components/NotFound”导入NotFound
从“./Components/TicTacToe”导入TicTacToe
从“./Components/Calculator”导入计算器
从“react Router”导入{IndexRoute，Route，Router}
常数路由=(
)
出口{路线}；

Index.jsx：

import React from 'react'
import {Link} from 'react-router'
import HTMLDocument from 'react-html-document'

export default class Index extends React.Component {
  render() {
    const metatags = [
      {
        name: 'viewport',
        content: 'maximum-scale=1,' + 
                 'initial-scale=1,' +
                 'width=device-width'
      },
      {
        name: 'content-type',
        content: 'text/html; charset=utf-8'
      }
    ]

    const scripts = [ '/production.min.js' ]
    const stylesheets = ["/production.min.css"]

    return (
      <HTMLDocument title="A sensible react static site" 
                    stylesheets={stylesheets}
                    metatags={metatags}
                    scripts={scripts}>
        <div id="app">
          {this.props.children}
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/Simon">Simon</Link></li>
            <li><Link to="/Pomodoro">Pomodoro</Link></li> 
            <li><Link to="/TicTacToe">TicTacToe</Link></li> 
            <li><Link to="/Calculator">Calculator</Link></li> 
          </ul>
        </div>
      </HTMLDocument>
    )
  }
}

从“React”导入React
从“反应路由器”导入{Link}
从“react html document”导入HTMLDocument
导出默认类索引扩展React.Component{
render（）{
常量元标记=[
{
名称：“视口”，
内容：“最大比例=1，”+
'初始刻度=1，'+
'宽度=设备宽度'
},
{
名称：'内容类型'，
内容：“text/html；charset=utf-8”
}
]
常量脚本=['/production.min.js']
const样式表=[“/production.min.css”]
返回(
{this.props.children}

家
西蒙
波莫多罗
蒂克塔克托
计算器

)
}
}

可以在此处找到所有其他相关文件和目录结构：。我希望有人看到过类似的问题或有建议，以了解更多有关故障的信息。

您看到了吗？您看到了吗？

import React from 'react'
import Index from './Index'
import Simon from './Components/Simon'
import Landing from './Components/Landing'
import Pomodoro from './Components/Pomodoro'
import NotFound from './Components/NotFound'
import TicTacToe from './Components/TicTacToe'
import Calculator from './Components/Calculator'
import {IndexRoute, Route, Router} from 'react-router'

const routes = (
  <Router>
    <Route path="/" components={Index}>
      <IndexRoute components={Landing}/>
      <Route path="/Simon" components={Simon}/>
      <Route path="/Pomodoro" components={Pomodoro}/>
      <Route path="/TicTacToe" components={TicTacToe}/>
      <Route path="/Calculator " components={Calculator}/>
      <Route path="*" components={NotFound}/>
    </Route>
  </Router>
)

export {routes};

import React from 'react'
import {Link} from 'react-router'
import HTMLDocument from 'react-html-document'

export default class Index extends React.Component {
  render() {
    const metatags = [
      {
        name: 'viewport',
        content: 'maximum-scale=1,' + 
                 'initial-scale=1,' +
                 'width=device-width'
      },
      {
        name: 'content-type',
        content: 'text/html; charset=utf-8'
      }
    ]

    const scripts = [ '/production.min.js' ]
    const stylesheets = ["/production.min.css"]

    return (
      <HTMLDocument title="A sensible react static site" 
                    stylesheets={stylesheets}
                    metatags={metatags}
                    scripts={scripts}>
        <div id="app">
          {this.props.children}
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/Simon">Simon</Link></li>
            <li><Link to="/Pomodoro">Pomodoro</Link></li> 
            <li><Link to="/TicTacToe">TicTacToe</Link></li> 
            <li><Link to="/Calculator">Calculator</Link></li> 
          </ul>
        </div>
      </HTMLDocument>
    )
  }
}