I am doing this Router tutorial.
My App.jsx file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export default Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export default About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export default Contact;
my Main.js file:
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
This error is written to the console: index.js:
Uncaught ReferenceError: ReactDOM is not defined
I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.
You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render.
Also need to import React in all files that use JSX.
Finally, also put react-router imports into Main, too.
The way imports work is, you import things you need, in places they're needed. It's not enough to import them once in one file and use in others.
Change Main.js to look like
import ReactDOM from 'react-dom'
import React from 'react'
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
1) install "npm install --save react-router-dom" with this command.
2) Know modify your App.jsx like this
import React from 'react';
import { Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<header>
<nav>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/contact'>Contact</Link></li>
</ul>
</nav>
</header>
);
}
}
class Content extends React.Component {
render() {
return (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</main>
);
}
}
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
);
}
}
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
);
}
}
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
);
}
}
export default App;
4) modify your main.js like this
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import {HashRouter} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), document.getElementById('app'))
you should import ReactDOM and other stuff in Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import {App, Home, About,Contact} from './App'
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
if App.js file contains all components you should change export statements:
from export default Component
to export Component.
And use named import in Main.js import {App, Home, About,Contact} from './App'
import React from 'react';
import { Link, browserHistory} from 'react-router'
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</Link>
<li>About</Link>
<li>Contact</Link>
</ul>
{this.props.children}
</div>
)
}
}
export App;
class Home extends React.Component {
render() {
return (
<div>
<h1>Home...</h1>
</div>
)
}
}
export Home;
class About extends React.Component {
render() {
return (
<div>
<h1>About...</h1>
</div>
)
}
}
export About;
class Contact extends React.Component {
render() {
return (
<div>
<h1>Contact...</h1>
</div>
)
}
}
export Contact;
for browserHistory, you must configure your server appropriately to serve at all routed paths. The simplier way is using hashHistory.
//import hashHistory
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
...
//pass in Router
<Router history = {hashHistory}> ....
This error also happens if there is a Typo
"import ReactDOM from "react-dom";"
and then call Reactdom.render( <App />, document.getElementById('root')) instead of ReactDOM.render....
I just have a simple solution for it!
in my case the problem was with ReactDom namespace. just change it to something else and it work!
import XReactDom from 'react-dom'
In this tutor this command "npm install react-router" does not save it in package.json file so modify and run command to "npm install --save react-router".
