I am getting this error while following React Router Tutorial HERE and HERE
It should work as it's supposed to do, because in index.html i have added "app" as id in a div container.
_registerComponent(...): Target container is not a DOM element.
./src/index.js
src/index.js:15
Here is INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import About from './modules/About'
import Repos from './modules/Repos'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
ReactDOM.render((
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<App />
<Route exact path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</div>
</Router>
), document.getElementById('app'));
INDEX.HTML
<!doctype html>
<html>
<head>
<title>My First React Router App</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
I was facing same issue-
My src/index.js looking like this-
ReactDOM.render(<App />,routing, document.getElementById('root'));
I moved all routes in a variable such as routing and now code in src/index.js file looks like-
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import About from './pages/abouts/about';
import Contact from './pages/contacts/contact';
import * as serviceWorker from './serviceWorker';
const routing = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
serviceWorker.unregister();
So, no need to pass <App/> any more in ReactDOM and that worked for me.
Related
I am trying to write my first web app with React and Node. I have written some JS and CSS for a component called Banner and rendered it in App.js, but when I save my changes, the change is not reflected on localhost:3000 which just shows a blank page.
The only time I got the localhost:3000 to show anything was when I wrote some text in HTML p tags in the body of the index.html. Then, the browser displayed the text.
I have also tried moving the id=root from index.html to App.js. That did not work.
Please, what am I doing wrong? How do I get the browser to display my components?
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
import React from 'react'
function Banner() {
return (
<div className="banner">
<h1> Some Text that goes on Banner </h1>
</div>
)
}
import React from 'react';
import './App.css';
import Banner from './components/Banner';
import Exhibit from './components/Exhibit'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
class App extends Component {
render() {
return (
<>
<Router>
<Banner />
</Router>
</>
);
}
}
.banner {
height: 30vh;
width: 100%;
position: fixed;
align-items: center;
background-color: #b300b3;
}
.banner > h1 {
color: #FFF;
font-size: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Title of Web App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Try to be more minimal in this level.
Only use banner component in App.js file.
delete router and <> </> in App.js file.
replace class App extends Component with class App extends React.Component
or add import { Component } from 'react'
I am trying to do this in a single html page. I first use unpkg.com to import the required things such as React and React-router-dom. If I use simple React staff, the page can load. Then I am trying to use React-router-dom, I add the script in the head tag and create a simple mydiv7. It shows an error message. Please help me see what is wrong with this code.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.development.js" crossorigin></script>
</head>
<body>
<div id="mydiv7"></div>
<script type="text/babel">
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
const Home = () => {
return <h1>Home</h1>;
};
const Blogs = () => {
return <h1>Blog Articles</h1>;
};
const Contact = () => {
return <h1>Contact Me</h1>;
};
const NoPage = () => {
return <h1>404</h1>;
};
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById('mydiv7'));
</script>
</body>
</html>
You need to import BrowserRouter according with documentation.
You can import with cdn using referenfes to window, like this.
const BrowserRouter = window.ReactRouterDOM.BrowserRouter;
I believe somewhere in your script you need to reference the react router package like you do with React for react and ReactDOM for react-dom.
From what I can tell react-router-dom is exported as ReactRouterDOM.
HTML Script Tags
Load the CDN links for the specific version of react-router-dom being used. Current is v6.1.1.
<!-- Load React Router and React Router DOM -->
<script src="https://unpkg.com/react-router#6.1.1/umd/react-router.development.js" crossorigin></script>
<script src="https://unpkg.com/react-router-dom#6.1.1/umd/react-router-dom.development.js" crossorigin></script>
const BrowserRouter = ReactRouterDOM.BrowserRouter;
const Routes = ReactRouterDOM.Routes;
const Route = ReactRouterDOM.Route;
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
I tried to build a really simple ReactJS router but it doesn't work when I access my localhost:8080/login URL.
Here is my App.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/login" exact component={Login} />
</Switch>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
I think this may come from the fact that I also use Babel in my project so it may creates conflicts but nothing shows in my VS Code terminal or even my devTools console.
Here is a part of my package.json file:
"scripts": {
"start": "webpack --mode=development",
"build": "webpack --mode=production",
"dev": "webpack-dev-server"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.1"
}
This is my index.html file:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
My browser returns "Cannot GET /login" but there aren't any console errors and my router only works for the "/" path.
Could anyone help me with that problem?
You have to do import {BrowserRouter as Router,Switch,Link} from react-router-dom
<Router>
<Switch>
<Route path="/login">
<Login/>
</Route>
</Switch>
</Router>
Create also a simple component called "Homepage" (this is optional).
If at the end, it doesn't work, try to re-create your app without ReactDom.
One last thing, it will be better to not use long folder paths for simple projects. You can bundle all your components in the same folder.
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch, Link } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";
import Home from "./Home"
function App() {
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/login"> <Login/> </Route>
<Route exact path="/"> <Home/> </Route>
</Switch>
<Link to="/login"> Login Page </Link>
<Link to="/"> Homepage </Link>
</div>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
I have a component Layout which I used to style the layout of my app and that's where I introduced react-helmet
The component is like this
import React from 'react';
import { Global, css } from '#emotion/core';
import Helmet from 'react-helmet';
import Header from '../components/header';
const Layout = ({ children }) => (
<>
<Global
styles={css`
// some CSS style
/>
<Helmet>
<html lang="en" />
<title>title</title>
<meta name="description" content="site description" />
</Helmet>
<Header />
<main
css={css`
// some css
`}
>
{children}
</main>
</>
);
export default Layout;
After I added <Helmet />, I have this error poppin up. And if I removed <Helmet /> from my component, the error would be gone. apparently I didn't forgot to export my Layout component so I really have no idea where this came from.
You need to use named import with react-helmet.
import {Helmet} from "react-helmet";
Docs: https://github.com/nfl/react-helmet#example
I have set Link and Route path with my header.js file. But with the laravel and react app, when i run npm run dev , it runs successfully. After that, when i run localhost:8000, the page only loading not showing any content. when i remove the
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
from script, it runs successfully, but with above code, it's only loading the page.
Header.js
import React, { Component } from 'react';
import{ BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './Index';
import About from './about';
export default class header extends Component {
render() {
return (
<Router>
<div>
<Link to ="/">Home</Link>
<Link to ="/about">About Us</Link>
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
</div>
</Router>
);
}
}
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Index extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
Welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" />
<title>Laravel</title>
</head>
<body>
<div id="app">
<h1>Hello... This is example</h1>
</div>
<script src="js/app.js"></script>
</body>
</html>
If my understanding is correct then I guess you can't call Index.js from Index.js.
What I mean to say is that you are trying to render the Index.js infintely.
Index.js is your root component. It has <Header/> which calls Index.js when the route matches the path /. Then it again calls Index.jswhich has <Header/> and so on.
What you can do instead is define a new Home component and create a new index.js to save yourself from the Infinite loop.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Home extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Home />, document.getElementById('app'));
}
You have an infinite recursive loop:
Index renders the component Header.
Header renders the component <Route exact path ="/" component={Index} />
This Route renders Index when you are on /
<Route/> works by rendering the component prop when you are on the path prop.