陣營路由器添加鏈接導航欄在

Question

這裏陣營的小白，我試圖使用React-router V4到主頁我material-ui工具欄添加一個link但我不斷收到錯誤：

Element 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. Check the render method of LandingToolBar .

我試圖在這裏複製基本示例https://reacttraining.com/react-router/web/example/basic，但將頂部列表放在另一個名爲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

您需要import的Link這樣的，它是一個named import不default import：

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

檢查這個答案named vs default import/export.