React Router passt nicht zu Pfad und Rendering <! - react-empty: 1 ->

Ich habe React Router implementiert und jetzt, wenn der Webpack-Dev-Server mein transpiliertes Asset lädt, sehe ich eine leere Seite mit <div id="container"></div>. Bitte beachten Sie die gesamte Struktur unter:React Router passt nicht zu Pfad und Rendering <! - 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>

Ist reagieren Router nicht in der Lage den Weg mit einer Strecke im Browser anzeigen lassen, die es verhindert, dass meine Komponente Rendering? Benütze ich die React Router API nicht korrekt? Mein Projekt ist here auf Github gehostet und hier ist mein Paket json und Anfang meiner reagieren App:

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'));

Paket 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" 
    } 
}

Quelle

2017-09-02 robertjewell

Sie haben einen Tippfehler. Ihr Weg sollte component haben und nicht components

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

Quelle

2017-09-02 18:22:42 Panther

oh mein Gott, ich danke Ihnen so sehr. – robertjewell

React Router passt nicht zu Pfad und Rendering <! - react-empty: 1 ->

Antwort

Verwandte Themen