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 - >

回答

相關問題