反応ルータを使用してアプリケーションをルーティングできないのはなぜですか？

Question

は私が反応し、基本的なアプリケーションを作ることによって、ルータに反応学び始めたが、私は

Warning 1: React.createElement: type is invalid -- expected a string 
(for built-in components) or a class/function (for composite components) 
but got: undefined. 

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

私のコード解決することはできませんよ警告取得しています：

index.js 

import React from 'react' 
import ReactDOM from 'react-dom' 
import routes from './routes' 

ReactDOM.render(routes, document.getElementById('app')); 

を。

routes.js 

import React from 'react' 
import { Route } from 'react-router' 
import Home from './components/home'; 
import Login from './components/login' 
const routes = (
    <Route path="/" component={Home}> 
    <Route path="/login" component={Login} /> 

    </Route> 
); 

export default routes; 

。 home.js

import React from 'react' 

export default React.createClass({ 
    render(){ 
     return (
      <div> 
       <h1>Hello From Home</h1> 
      </div>); 
    } 
}); 

login.js

import React from 'react' 


export default React.createClass({ 
    render(){ 
    return (<h1>Hello From Login Page</h1>); 
    } 
}); 

これは、上述の警告とブランク画面を与えている私の

package.json

{ 
    "name": "basicapp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 

    "production": "webpack -p", 
    "start": "webpack-dev-server" 
    }, 
    "author": "aviaTorX", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^4.0.0" 
}, 
"devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.0", 
    "babel-preset-react": "^6.23.0", 
    "html-webpack-plugin": "^2.28.0", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.4.2" 
} 
} 

です。

Answer 1

反応ルータ^4.0.0を使用している場合、ルートコンポーネントには Router要素が必要です。 routes.jsファイルから見つからないようです。 あなたroutes.jsは次のようになります。

import React from 'react' 
import { Route, BrowserRouter as Router } from 'react-router' 
import Home from './components/home'; 
import Login from './components/login' 
const routes = (
    <Router> 
    <Route path="/" component={Home}> 
     <Route path="/login" component={Login} /> 
    </Route> 
    </Router> 
); 

export default routes; 

Answer 2

あなたroutes.jsが

import React  from 'react' 
    import { 
     Route, 
     Router, 
     IndexRoute, 
     hashHistory 
    }    from 'react-router' 
    import Home  from './components/home'; 
    import Login  from './components/login' 

    export const routes =() => { 
     return( 
      <Router history={hashHistory}> 
      <IndexRoute component={Home} /> 
      <Route path="/login" component={Login} /> 
      </Router> 
     ); 
    }; 
    export default routes; 

Answer 3

あなたが直接this.props.history.push('/list/')を使用することができなければなりません。 しかし、私のreact-routerのバージョンは^4.2.0である、ということを覚えておいてください。