使用反应路由器 4 和 redux 时反应视图不呈现
React view is not rendering when using react router 4 and redux
我想使用 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>
);
}
}
import { Home } from "./components/home/Home";
应该是:
import Home from "./components/home/Home";
Here你可以了解importing/exporting是否默认的区别
我想使用 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>
);
}
}
import { Home } from "./components/home/Home";
应该是:
import Home from "./components/home/Home";
Here你可以了解importing/exporting是否默认的区别