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!
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.