如何路由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';

或將“標題”組件中的導出更改為

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)

取決於您如何導入

Answer 2

您好像忘記了在containers/App.js添加export default App 。

嘗試import Header from '../components/Header'導入Header組件，例如import Header from '../components/Header'