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'))
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....
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'))
I had the same issue with my ReactDOM.render not to work until I imported the following:
import ReactDOM from 'react-dom'
into the page I created, which was the shopping cart page.
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}> ....
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".
RouterDOM is used in main file, in your case its Main.js (where rendering takes place). Your Main.js file is the starting point and as its render reactDOM but cannot find the import for it.
Just to import it in same file where its used.
I had a similar issue and was able to fix it by importing ReactDOM like this:
import * as ReactDOM from 'react-dom';
And then used it like this:
<Fragment>
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById("backdrop-root")
)}
</Fragment>
Related
I tried using react router but it doesn't work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:
App.js
'''
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<Router>
<div>
<HomePage />
</div>
</Router>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
'''
HomePage.js
'''
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
<p>This is Home Page</p>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
'''
The error is that "You cannot render a Router inside another Router " occurs when we have 2 Router components in the same React application.
So if u see u are calling in App.js and when u call Homepage from app.js it renders again. Thats why everything becomes blank.
and avoid using p tag inside render function in homepage.js
Try doing this:
**App.js**
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
**Homepage.js**
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
I'm trying to set up routing but for some reason, it returns a blank page and renders nothing.
I'm using router version 6.3.0
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Route path="/landing">
<Landing />
</Route>
<Footer />
</Fragment>
);
}
}
export default App;
// --------------------------------------------- //
// Landing.js
import Body from './Body'
function Landing(props) {
return (
<Body>
<div className="Landing">
Landing Context
</div>
</Body>
)
}
export default Landing;
So when I visit http://localhost:3000/landing nothing is rendered, and when I try http://localhost:3000 nothing is rendered either.
If I remove the <Route></Route> part in App.js, it renders, but on any URL. What do I miss?
As the OP is using react-router-dom v6
Instead of children, it is expecting element props to render the component.
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes
In app.js wrap your route in router like this
import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Router>
<Route path="/landing">
<Landing />
</Route>
</Router>
<Footer />
</Fragment>
);
}
}
export default App;
react-router v6 has some breaking changes, it replaced Switch with Routes component:
/ index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter><App /></BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
// --------------------------------------------- //
// App.js
import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";
class App extends Component {
render() {
return (
<Fragment>
<Header />
<Routes>
<Route path="/landing" element={<Landing />}/>
</Routes>
<Footer />
</Fragment>
);
}
}
export default App;
https://reactrouter.com/docs/en/v6/getting-started/overview
If your are using react-router version < 6 then you have to add Switch element imported from react-router-dom above your Route Element -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Switch>
<Route path="/landing">
<div>On LAnding Page</div>
</Route>
</Switch>
</Fragment>
);
}
}
export default App;
And if you are using react-router > 6 then you have to replace Switch with Routes and place your component you want to render inside element property of Route . The code should be similar to following -
// App.js
import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";
class App extends Component {
render() {
return (
<Fragment>
<Routes>
<Route path="/landing"
element={<div>On Landing Page</div>}>
</Route>
</Routes>
</Fragment>
);
}
}
export default App;
I'm a newbie at React, please correct me if I'm wrong...I've used the Switch tag to enclose multiple Routes in my MainComponent.js file. However, I still got an error that says "A may have only one child element". I'm trying to navigate from one page to another.
For example, when I click on Menu in the landing page, I would like to get routed to Menu.
Please advise what went wrong. Thanks in advance.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
class App extends Component {
// pass dishes to children (MenuComponent.js) as props
/*
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}*/
render() {
return (
<BrowserRouter> {/* Make use of React Router */}
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
// Container Component
import React, { Component } from 'react';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes'; // .. means to go up one level to src
import { Switch, Route, Redirect } from 'react-router-dom';
class Main extends Component {
// pass dishes to children (MenuComponent.js) as props
constructor(props) {
super(props);
this.state = {
dishes: DISHES,
// selectedDish: null
};
}
/*
onDishSelect(dishId) {
this.setState({selectedDish: dishId});
}
*/
render() {
const HomePage = () => {
return (
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path="/home" component={HomePage} />
<Route exact path="/menu" component={() => <Menu dishes={this.state.dishes} />} /> {/* path should exactly match /menu and nothing else after /menu */}
{/* component={() => <Menu dishes={this.state.dishes} />} ----> this will allow to pass props to Menu component */}
<Redirect to="/home" /> {/* if the path doesn't match any above, redirect to /home */}
</Switch>
<Footer />
</div>
);
}
}
export default Main;
Just remove the <div className="App"> from your App.js file.
And use the below code as I have written below. It will 100% work for you.
import { BrowserRouter } from 'react-router-dom';
class App extends Component
{
render() {
return (
<BrowserRouter>
<Main/>
</BrowserRouter>
);
}
}
export default App;
I am learning React, so this question may make no sense but I want to learn it.
I have index.html page and I want to jump to Components.html page.
RouteToComponent.jsx
import React from 'react';
class RouteToComponents extends React.Component {
render() {
return (
<div>
Components
</div>
);
}
}
export default RouteToComponents;
RouteToComponent.jsx is called inside index.jsx
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import RouteToComponents from './BasicJSX/RouteToComponents.jsx';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
<RouteToComponents />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
components.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
Entered Components HTML!!!
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
But when I click on a tag URL changes but the page remains same.
Wrap your App.js with Router and define Routes. <Route /> allows us to define all paths of our Application.
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import RouteToComponents from './RouteToComponents.jsx';
import AnyComponent from './AnyComponent';
import App from './App.jsx';
return (
<Router>
<RouteToComponents />
<Switch>
<Route exact path="/" component={App} />
<Route path="/Components/Components.html" component={AnyComponent} />
</Switch>
</Router>
);
Now in your Component where you want to use Link.
In React <Link /> is used instead of anchor.
import { Link } from "react-router-dom";
return (
<div>
<Link to="Components/Components.html">Components</Link>
<Link to="/">Home</Link>
</div>
);
to in Link attribute is similar to href in anchor.
Remember:
npm i react-router-dom
to attribute of Link must be similar to the path defined in App.js Route.
Because when you click on Link it matches Routes in App.js
When I am clicking on the link "cake" I am getting the error the path is not matched or server is not able to find.
Here is my code for 3 files - Router, Navigation and detail components
Routers.js- component handling the routing
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route , HashHistory , IndexRoute , useRouterHistory} from 'react-router';
import History from 'history';
import {CreateHashHistory} from 'history';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { browserHistory } from 'react-router';
import Base from './Base.jsx';
import ListDetail from './ListDetail.jsx';
let Routes =
<Router history={browserHistory}>
<Route path="/" component={Base} >
<Route path="/cake" component= {ListDetail}></Route>
</Route>
</Router>
export default Routes;
Navigation components - handling the navigaton links
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
class ContentList extends React.Component {
render(){
return(
<div id="innercontent">
<h2>What you love?</h2>
<ul >
<Link to={'/cake'}>Cakes</Link>
<Link to={'/icecream'}>icecream</Link>
<Link to={'/browin'}>browin</Link>
</ul>
</div>
)
}
}
export default ContentList;
Detail Component - Detail page to display
import React from 'react';
import ReactDOM from 'react-dom';
class ListDetail extends React.Component {
render(){
return(
<div>
<h1>hi Details</h1>
</div>
)
}
}
export default ListDetail;
Base.JSX
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header.jsx';
import Footer from './footer.jsx';
import ContentList from './contentList.jsx';
import FormElement from './form.jsx';
import ListDetail from './ListDetail.jsx';
class Base extends React.Component {
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
</section>
<Footer />
<ListDetail />
</div>
)
}
}
export default Base;
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './router.jsx';
ReactDOM.render(Routes, document.getElementById('app'));
Thanks for the help!!
The render function of your base.jsx file should be something like this :
render(){
return(
<div>
<Header name="My Recipe Book"/>
<section id="content">
<FormElement />
<ContentList />
{this.props.children}
</section>
<Footer />
</div>
)
}
Route should be
<Route path="cake" component= {ListDetail} />
And the link :
<Link to="cake">Cakes</Link>
You need to render the routes somewhere.
...A single component to be rendered when the route matches the URL. It can be rendered by the parent route component with this.props.children. Read this.
const routes = (
<Route path="/" component={App}>
<Route path="groups" component={Groups} />
<Route path="users" component={Users} />
</Route>
)
class App extends React.Component {
render () {
return (
<div>
{/* this will be either <Users> or <Groups> */}
{this.props.children}
</div>
)
}
}
You don't need the / in /cake, it's already under /. Do it like this:
<Route path="cake" component={ListDetail} />
Try the following, not sure if it would help.
1. Use
var ContentList = React.createClass({})
instead of
class ContentList extends React.Component.
2. remove the / before 'cake' in your route path.
try using
var Routes = React.createClass({
render: function() {
return (
<div>
<Router history={browserHistory}>
and your updated code instead of let
hope it helps
Does it work with hashHistory ?
To use browserHistory, you need to set up server side rendering.
Here is the tutorial (especially lesson 11 and 13) which helped me understand and set up react-router using browserHistory and server side rendering:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/
Hope it helps.