当使用反应路由器4和REDX时，反应视图不会呈现

我想使用React，React router 4，Redux创建一个简单的示例。但我被困在渲染过程中。路由器用户正常渲染，但我的主视图没有。另外我没有错误，所以我不知道问题是。任何帮助，我会非常感谢。当使用反应路由器4和REDX时，反应视图不会呈现

文件：

index.js

import React from "react"; 
import { render } from "react-dom"; 
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'; 
import { createStore,applyMiddleware } from "redux"; 
import thunk from "redux-thunk"; 
import rootReducer from "./reducers/rootReducer"; 
import { Provider } from"react-redux" 
import { composeWithDevTools } from "redux-devtools-extension"; 
import { Home } from "./components/home/Home"; 
import { User } from "./components/user/User"; 

const store = createStore(
    rootReducer, 
    composeWithDevTools(
     applyMiddleware(thunk) 
    ) 
); 

class App extends React.Component{ 
    render(){ 
     return(
      <Provider store={store}> 
      <Router> 
       <div> 
        <Link to="/">Home</Link> 
        <Link to="/user">User</Link> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/user" component={User}/> 
       </div> 
      </Router> 
      </Provider> 

     ); 
    } 
} 

render(<App/>,window.document.getElementById("app"));

rootReducer.js

import { combineReducers } from "redux"; 
import userReducer from "./userReducer"; 

export default combineReducers({ 
    user:userReducer 
});

userReducer.js

export default function User(state=[{name:'TMP'}],action={}){ 
    switch (action.type){ 
     default: return state 
    } 
}

Home.js

import React from "react"; 
import {connect} from"react-redux" 
import { withRouter } from 'react-router-dom' 


class Home extends React.Component{ 
    render(){ 
     return(
      <div> 
       TADAAAAA HOME 
       {user} 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return{ 
     user:state.user 
    } 
} 
export default withRouter(connect(mapStateToProps)(Home))

user.js的

import React from "react"; 


export class User extends React.Component{ 
    render(){ 
     return(
      <div> 
       USER 
      </div> 
     ); 
    } 
}

来源

2017-06-14 user2217288

您将默认导出为Home，而不是Home。将导入更改为“{默认为主页}”或导出到已命名的导出 –

import { Home } from "./components/home/Home";

应该是：

import Home from "./components/home/Home";

Here您可以了解作为默认导入/导出的差异

来源

2017-06-14 10:55:54 Mayday

当使用反应路由器4和REDX时，反应视图不会呈现

回答

相关问题