为什么我无法使用反应路由器路由我的应用程序？

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

如果您使用的是react-router ^4.0.0，则您的根组件需要 a 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。