简体   繁体   中英

Meteor - Simple react router throwing errors

I have basically copied code straight from the documentation, and it is throwing a peculiar error.

 Warning: Failed prop type: The prop `history` is marked as required in
 `Router`, but its value is `undefined`.
     in Router

Here is my code:

client/main.jsx

import React from "react"
import { render } from "react-dom"
import { Meteor } from "meteor/meteor"

import { renderRoutes } from "../imports/ui/Routes.jsx"

Meteor.startup(() => {
    render(renderRoutes(), document.getElementById('react-root'))
})

imports/ui/Routes.jsx

import React from 'react'
import { render } from "react-dom"
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

// route components
import App from "./App.jsx"

export const renderRoutes = () => (
   <Router history={browserHistory}>
    <Route path="/" component={App} />
   </Router>
)

imports/ui/App.jsx

import React, { Component } from 'react'

import TopBar from "./components/TopBar.jsx"
import LeftMenuContainer from "./components/LeftMenuContainer.jsx"
import LivePurchases from "./components/LivePurchases.jsx"

// App component - represents the whole app
export default class App extends Component {
  render() {
    return (
        <div className="App">
            <div className="flexWrapperGlobal">
                <TopBar/>
                <div className="contentContainer">
                    <LeftMenuContainer/>
                    <div className="bodyContainer">
                        <LivePurchases/>
                        <div className="siteContentContainer">
                            {this.props.children || "test"}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}

It appears that it should not be giving this error, as I am setting the prop at history={browserHistory}

Switch over to the example from the React Docs ,

imports/ui/Routes.jsx

import React from 'react'
import { render } from "react-dom"
import { Router, Route, IndexRoute } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

// route components
import App from "./App.jsx"

const history = createBrowserHistory()
export const renderRoutes = () => (
   <Router history={history}>
    <Route path="/" component={App} />
   </Router>
)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM