Question

我想使用React，React router 4，Redux创建简单的示例。但我坚持渲染过程。路由器用户正常渲染但我的主视图没有。我也没有错误，所以我不知道问题是什么。任何帮助我都会非常感激。

文件：

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

Answer 1

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

应该是：

@SqlGroup

Here您可以了解默认情况下导入/导出的差异

使用react router 4和redux

1 个答案: