我正在使用React，React-router，React-router-redux和react-redux的最新版本，但我似乎无法获得除我的App以外的任何其他路由 . 我得到的只是一个空白页面 . 我没有做任何嵌套，但我怀疑它可能与我的设置有关...在控制台中检查时也没有错误 .
我的index.js看起来像这样：
import 'babel-polyfill';
// Write entry-point js for webpack here....
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import App from './containers/App';
import configureStore from './store/configureStore'
import { Router, Route, browserHistory } from 'react-router';
import { PasswordResetView } from './views/PasswordResetView';
import {Test} from './components/Test';
const store = configureStore()
const reactEntry = document.getElementById('react-root');
// Render....
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}/>
<Route path="/test" component={Test}/>
</Router>
</Provider>,
reactEntry
)
我的App.js是这样的：
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { loginUser } from '../../actions';
import Navbar from '../../components/Navbar';
import {Link} from 'react-router';
class App extends Component {
render() {
const { dispatch, isAuthenticated, errorMessage, isFetching } = this.props
return(
<div>
<div>
<Navbar
isFetching={isFetching}
isAuthenticated={isAuthenticated}
errorMessage={errorMessage}
dispatch={dispatch}/>
</div>
{this.props.children}
<div>
<Link to="/test">Test</Link>
</div>
</div>
)
}
}
App.propTypes = {
dispatch: PropTypes.func.isRequired,
isFetching: PropTypes.bool.isRequired,
isAuthenticated: PropTypes.bool.isRequired,
errorMessage: PropTypes.string
}
const mapStateToProps = (state) => {
const { isAuthenticated, errorMessage, isFetching } = state.auth
console.log(state.auth)
return {
isAuthenticated,
errorMessage,
isFetching
}
}
export default connect(mapStateToProps)(App)
我的Test.js文件从'react'导入React，
export default class Test extends Component {
render(){
return (
<div>Test</div>
)
}
}
任何帮助将不胜感激!!我确定我已经搞砸了某个地方......
1 回答
我最终将我的App组件重写为更多的家庭/父组件来容纳我的其他路线 . 我猜我错误地使用了react-router并且在子路由和父路由之间出现了某种问题（虽然我确实使用this.props.children来测试..谁知道！）