React路由器不匹配路径和渲染<！ - react-empty：1 - >

我实现了React路由器，现在当webpack dev服务器加载我的传输资源时，我看到一个带有<div id="container"></div>的空白页面。请参考下面的整个树：React路由器不匹配路径和渲染<！ - react-empty：1 - >

<html><head> 
    <meta charset="UTF-8"> 
    <title>Webpack App</title> 
    </head> 
    <body> 
    <div id="container"><!-- react-empty: 1 --></div> 
    <script type="text/javascript" src="main.js"></script> 
    <script type="text/javascript" src="main.js"></script> 

</body></html>

反应是路由器无法匹配与路由的浏览器的路径，它禁止渲染我的组件？我没有正确使用React路由器API吗？我的项目托管在GitHub上here，这里是我的包JSON和开始我的反应应用程序：

import { createBrowserHistory } from 'history'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Switch } from 'react-router'; 
import { Provider } from 'react-redux'; 

import Components from './components/'; 
import Containers from './containers/'; 
import store from './store'; 

const history = createBrowserHistory(); 

//<Route path='/write-post' components={Components.WritePost} /> 

//<Route exact path='/' components={Containers.Home} /> 
ReactDOM.render(
    (<Provider store={store}> 
    <Router history={history}> 
     <Switch> 
     <Route path='/' components={Components.WritePost} /> 
     </Switch> 
    </Router> 
    </Provider>), document.getElementById('container'));

包JSON：

{ 
    "name": "personal-web-app", 
    "version": "1.0.0", 
    "description": "", 
    "homepage": "./", 
    "main": "index.js", 
    "scripts": { 
    "build-server": "node_modules/.bin/webpack-dev-server --config webpack.js", 
    "build": "node_modules/.bin/webpack --config webpack.js", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "history": "^4.7.2", 
    "prop-types": "^15.5.10", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-redux": "^5.0.6", 
    "react-router": "^4.2.0", 
    "redux": "^3.7.2", 
    "redux-logger": "^3.0.6" 
    }, 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-react": "^6.24.1", 
    "html-webpack-plugin": "^2.30.1", 
    "webpack": "^3.5.5", 
    "webpack-dev-server": "^2.7.1" 
    } 
}

来源

2017-09-02 robertjewell

你有一个错字。你的路线应该有component而不是components

<Route path='/' component={Components.WritePost} />

来源

2017-09-02 18:22:42 Panther

哦，我的上帝，谢谢你这么多。 – robertjewell

React路由器不匹配路径和渲染<！ - react-empty：1 - >

回答

相关问题