javascript - 如何路由 React-Redux 应用程序？

Question

我已经按照教程开始创建一个简单的 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

我该如何解决？谢谢

Answer 1

问题在于您导入 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)

取决于你如何导入它