我已经开始按照教程创建一个简单的React-Redux
应用程序。但从那时起React的路由器系统发生了变化,我无法确定如何正确使用路由。
我的index.js
文件包括:
import App from "./containers/App"
render(
<Provider store={store}>
<App />
</Provider>
,
window.document.getElementById('app'));
然后在containers/App.js
...
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import {Header} from '../components/Header';
...
class App extends React.Component {
render() {
return (
<Router>
<div className="container">
<Header/>
<Main changeUsername={() => this.props.setName("Anna")}/>
<User username={this.props.user.name}/>
</div>
</Router>
);
}
}
const mapStateToProps = (state) => {
return {
user: state.user,
math: state.math
};
};
const mapDispatchToProps = (dispatch) => {
return {
setName: (name) => {
dispatch(setName(name));
},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(App)
问题来自components / Header.js
import { Link} from 'react-router-dom'
const Header = (props) => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Link className="nav-link" to="/">Spider</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item" activeClassName={"active"}>
<Link className="nav-link" to="/home">Home</Link>
</li>
<li className="nav-item" activeClassName={"active"}>
<Link className="nav-link" to="{user/${user.id}}">User</Link>
</li>
</ul>
</div>
</nav>
);
}
export default Header
控制台显示错误:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
in App (created by Connect(App))
in Connect(App)
in Provider
我该如何解决?谢谢
问题在于导入Header
组件的方式。您将其导出为默认值,但您在此处将其导入为命名导入
import {Header} from '../components/Header';
将导入更改为
import Header from '../components/Header';
或将Header组件中的导出更改为
export { Header }
除此之外,您还需要解决其他小问题
第一:
<Link className="nav-link" to="{user/${user.id}}">User</Link>
应该
<Link className="nav-link" to=`{user/${user.id}}`>User</Link>
第二:
您需要将withRouter与Header一起使用,因为它没有直接连接到Route
你可以这样做
import {withRouter} from 'react-router'
const withHeader = withRouter(Header)
export {withHeader as Header}
要么
import {withRouter} from 'react-router'
export default withRouter(Header)
取决于您如何导入它
看起来你忘了在export default App
添加containers/App.js
。
尝试导入像import Header from '../components/Header'
这样的Header组件