1
我有以下代碼：陣營終極版路由器無法路由
/* 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組件。
你能告訴我如何解決這個問題嗎？