阵营终极版路由器无法路由
问题描述:
我有以下代码:阵营终极版路由器无法路由
/* index.js */
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, Link } from 'react-router'
import App from './components/app';
import DetailComponent from './components/detailcomponent';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router>
<Route path="/" component={App} />
<Route path="/detail" component={DetailComponent} />
</Router>
</Provider>
, document.querySelector('.container'));
/* components/app.js */
import React from 'react';
import { Component } from 'react';
import UserListing from '../containers/user-listing';
import UserDetail from '../containers/user-detail';
export default class App extends Component {
render() {
return (
<div>
<UserListing />
<UserDetail />
</div>
);
}
}
/* components/detailcomponent.js */
import React from 'react';
import { Component } from 'react';
export default class DetailComponent extends Component {
render() {
return (
<div>
This is the Detail Component!
</div>
);
}
}
/* containers/user-detail.js */
import React, { Component } from 'react';
import { connect } from 'react-redux';
class UserDetail extends Component {
render() {
if (!this.props.user) {
return <div>Select a user to view details.</div>;
}
return (
<div>
<h3>Details for:</h3>
<div>Username: {this.props.user.username}</div>
<div>E-mail: {this.props.user.email}</div>
<div>Twitter: {this.props.user.twitter}</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.activeUser
};
}
export default connect(mapStateToProps)(UserDetail);
/* containers/user-listing.js */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { chosenUser } from '../actions/index';
import { bindActionCreators } from 'redux';
class UserListing extends Component {
renderList() {
return this.props.users.map((user) => {
return (
<li
key={user.username}
onClick={() => this.props.chosenUser(user)}
className="list-group-item">
{user.username}, {user.email}, {user.twitter}
</li>
);
});
}
render() {
return (
<ul className="list-group col-sm-4">
{this.renderList()}
</ul>
)
}
}
function mapStateToProps(state) {
return {
users: state.users
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ chosenUser }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(UserListing);
/* reducers/index.js */
import { combineReducers } from 'redux';
import UserReducer from './reducer_user';
import ActiveUser from './reducer_active_user';
const rootReducer = combineReducers({
users: UserReducer,
activeUser: ActiveUser
});
export default rootReducer;
/* reducers/reducer_active_user.js */
export default function(state = null, action) {
switch(action.type) {
case 'USER_SELECTED':
return action.payload;
}
return state;
}
/* reducers/reducer_user.js */
export default function() {
return [
{username: 'John Doe', email: '[email protected]', twitter: 'johndoe1'},
{username: 'Paul Smith', email: '[email protected]', twitter: 'csswizardry'},
{username: 'Petra Tweets', email: '[email protected]', twitter: 'petra'},
{username: 'Mark Chills', email: '[email protected]', twitter: 'chillymark12'},
{username: 'John McIntyre', email: '[email protected]', twitter: 'jokesforfun'},
];
}
我想创建一个路由“/细节”在这里我想基本上是展示什么现在是在容器/user-detail.js。
现在,当我将URL更改为/ detail时,会显示App组件。
你能告诉我如何解决这个问题吗?
答
你的路由配置看起来是正确的,所以我的猜测是你的代码不重新编译。例如,这可能是由于JS中的语法错误造成的。
我建议删除您编译JS,然后看是否可以重建,用你的构建工具(的WebPack,Browserify等),看是否有错误控制台。
注意:由于您的代码段不可运行,因此很难重现该问题。您可以使用此作为起点:jsfiddle.net/reactjs/69z2wepo/