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

【问题标题】：How to route a React-Redux app?如何路由 React-Redux 应用程序？
【发布时间】：2017-12-24 08:41:38
【问题描述】：

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

我该如何解决？谢谢

【问题讨论】：

标签： javascript react-router react-router-dom

【解决方案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)

取决于你如何导入它

【讨论】：

如果您也遇到任何问题，请添加您如何配置您的Routes
谢谢 .. 这是一个出口问题。但我很困惑？我应该使用 react-router 还是 react-router-dom ？
您可能需要将两者结合使用
我无法获得 userlink 的道具你能帮我吗？我们可以在某个地方聊天吗？

【解决方案2】：

您好像忘记在containers/App.js 中添加export default App。

尝试导入像import Header from '../components/Header'这样的Header组件

【讨论】：

我添加了 react-redux 连接器，我在粘贴时缩短了代码。