リアクト-ルータナビゲーションバー

Question

にリンクを追加することを、私はホームページにReact-router V4を使用して、私のmaterial-uiツールバーのlinkを追加しようとしているが、私はエラーを取得しておく、ここでnoobのに反応ここでは基本的な例をコピーしようとしていますが、代わりにLandingToolBarという別のコンポーネントにトップリストを置いていますが、動作させるためには見えません。ここに私のindex.jsです：

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App' 
import injectTapEventPlugin from 'react-tap-event-plugin' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 


injectTapEventPlugin(); 

ReactDOM.render(
    <MuiThemeProvider> 
      <App /> 
    </MuiThemeProvider>, 
    document.getElementById('app') 
); 

マイapp.js：

import React from 'react' 
import {Route, BrowserRouter, Switch} from 'react-router-dom' 
import LoginPage from "./containers/LoginPage"; 
import SignUpPage from "./containers/SignUpPage"; 
import HomePage from "./components/landing/HomePage"; 
import LandingToolBar from "./components/landing/LandingToolBar"; 

class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <div> 
        <LandingToolBar/> 
        <Switch> 
         <Route path="/" exact component={HomePage}/> 
         <Route path="/login" component={LoginPage}/> 
         <Route path="/signup" component={SignUpPage}/> 
        </Switch> 
       </div> 
      </BrowserRouter> 
     ) 
    } 
} 

export default App; 

そして、私は常にレンダリングしようとしているツールバーのコンポーネントLandingToolBar：

ルーティング部分とかなり難しい苦労

import React from 'react'; 
import Link from 'react-router-dom'; 
import {ToolbarGroup, ToolbarTitle, RaisedButton, Toolbar} from 'material-ui'  

const LandingToolBar =() => (
    <Toolbar> 
     <ToolbarGroup> 
      <ToolbarTitle text="ETFly"/> 
      <Link to="/">feafeaf</Link> 
     </ToolbarGroup> 
    </Toolbar> 
); 

export default LandingToolBar; 

ドキュメントやv4の内容についてはあまり説明がないようです...

助けてくれてありがとう！

Answer 1

あなたはこのようなLinkをimportする必要があり、そのnamed importないdefault import：

import {Link} from 'react-router-dom'; 

はnamed vs default import/export.