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) 

と問題のコンポーネントから来て/ 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

のようなヘッダ・コンポーネントをインポートしてみます。変更に

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を使用する必要が

like

import {withRouter} from 'react-router' 
const withHeader = withRouter(Header) 
export {withHeader as Header} 

または

import {withRouter} from 'react-router' 
export default withRouter(Header) 

あなたは

Answer 2

export default Appをcontainers/App.jsに追加していないようです。

は、問題は、あなたがHeaderコンポーネントをインポートする方法であるimport Header from '../components/Header'