如何路由React-Redux应用程序?

问题描述 投票:1回答:2

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

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

取决于您如何导入它


0
投票

看起来你忘了在export default App添加containers/App.js

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

© www.soinside.com 2019 - 2024. All rights reserved.