React-router adding Link in navbar

Question

React noob here, I'm trying to add a link in my material-ui toolbar using React-router v4 to the home page but I keep getting the error:

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.

I'm trying to copy the basic example here https://reacttraining.com/react-router/web/example/basic but instead putting the top list in another component called LandingToolBar but I can't see to get it to work. Here is my 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')
);

My 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;

And the toolbar component LandingToolBar that I'm trying to render always:

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;

Struggling pretty hard with the routing part as there doesn't seem to be much explanation in the docs or for v4 stuff...

Thanks for the help!

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

You need to import the Link like this, its a named import not default import:

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

Check this answer for named vs default import/export.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 12 '17 at 18:27

Mayank Shukla

80,295
14
134
129

Wow. Thank you so much. I could not see that. I will need to learn more about named imports vs default imports... – coolboyjules Apr 12 '17 at 18:33

React-router adding Link in navbar

1 Answers1