I don't have the following error when I run my code on my VirtualBox. (localhost)
But when I deploy on Heroku (and run heroku open or heroku local web) I got whole blank page, and the following error: bundle.js:1285 Uncaught Error: _registerComponent(...): Target container is not a DOM element.
Image of Detailed Error Message
My react versions in the package.json
...
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
I have no idea about this error and have googled some similar error on the stackoverflow. Most of solutions are putting bundle.js before the end of the body.
index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Drone Tracker </title>
</head>
<body>
<div id="wrapper" class="active">
<div id="page-content-wrapper">
<div class="page-content-inset">
<div id="root"> </div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGD352Uy7zH5XMLZ__x2XyuMyUOxVDLgQ&language=zh-TW"></script>
<script src="/bundle.js"> </script>
</body>
</html>
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ContentBody from './components/content_body';
import NavBar from './components/NavBar.js';
import Main from './components/Main.js';
import { BrowserRouter } from "react-router-dom";
class App extends Component{
render(){
return (
<div>
<NavBar />
<Main />
</div>
);
}
}
ReactDOM.render(
<BrowserRouter >
<App />
</BrowserRouter>, document.querySelector('#root'));
Main.js
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home.js';
import ContentBody from './content_body';
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/contentBody' component={ContentBody}/>
</Switch>
</main>
);
export default Main;
Home.js
import React from 'react';
const Home = () => (
<div>
<h1>HOME PAGE</h1>
</div>
);
export default Home;
Related
I have an app that successfully routes the url, but for some reason the pages aren't displaying under the header. I've looked at the other questions and available resources, but I'm very stuck in figuring out what I'm doing wrong. I am using react-router-dom 6.3.0
Here are my files for reference:
Index.js:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Router>
<App />
</Router>
);
App.js:
import "./App.css";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Freshman from "./pages/Freshman";
import Sophomore from "./pages/Sophomore";
import Junior from "./pages/Junior";
import Senior from "./pages/Senior";
function App() {
return (
<div className='app'>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="freshman" element={<Freshman />} />
<Route path="sophomore" element={<Sophomore />} />
<Route path="junior" element={<Junior />} />
<Route path="senior" element={<Senior />} />
</Routes>
</div>
);
}
export default App;
Header.js:
import React from "react";
import { Link } from "react-router-dom";
import "./Header.css";
function Header() {
return (
<div className="header-container">
<Link to="/" className="header-title">
College
</Link>
<nav>
<Link to="freshman" className="nav-item">
Freshman
</Link>
<Link to="sophomore" className="nav-item">
Sophomore
</Link>
<Link to="junior" className="nav-item">
Junior
</Link>
<Link to="senior" className="nav-item">
Senior
</Link>
</nav>
</div>
);
}
export default Header;
Home.js:
import React from "react";
function Home() {
return (
<div>
<h1>home</h1>
</div>
);
}
export default Home;
All of the pages are just an tag with their title in black font. However, like I said, none of the pages are displaying even though the url is correctly routed. Any help would be much appreciated!
Your code seems right!
May be try adding a " / " before every routes.
Reply if you're seeing white screen in preview...
You need an <Outlet /> element to render the routes. Based on your code, it looks like this should be in the return statement of Home.js:
import React from "react";
function Home() {
return (
<div>
<h1>home</h1>
<Outlet />
</div>
);
}
export default Home;
This will render the freshman, softmore, junior, senior components as subcomponents of Home, depending on which route is selected.
You can read the documentation for <Outlet /> here: https://reactrouter.com/docs/en/v6/components/outlet
I am using Bootstrap with ReactJS in order to learn the latter.
I want to diplay a Bootstrap Navbar in my app.
My code is the following:
app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
// {' React Bootstrap'}
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<!-- BOOTSTRAP -->
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My app</title>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
But I get:
Invalid hook call. Hooks can only be called inside of the body of a function component
I did some research and people suggest that the error is caused by different version of React.
So I run npm ls react but I get only one version:
myapp-frontend#0.1.0 /Desktop/myapp-frontend
└── react#16.10.2
As suggested in comment, if I run npm ls react-dom I get this:
myapp-frontend#0.1.0 /Desktop/myapp-frontend
└── react-dom#16.10.2
Can you remove this out of your code please
// {' React Bootstrap'}
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
I think the error is coming from that line
My project was working on my computer but now on CodeSanbox I've got an error
Target container is not a DOM element
The project is just a template project using react & parcel.
I didn't change anything between my home project and the one on codesanbox.
<!DOCTYPE html>
<html>
<head>
<title>React App w/ Parcel</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
const App = () => {
return <div />;
};
ReactDOM.render(<App />, document.getElementById("app"));
github repo
There seems to be a clash with the keyword app.
You can simply rename the div to root or similar
<!DOCTYPE html>
<html>
<head>
<title>React App w/ Parcel</title>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
const App = () => {
return <div />;
};
ReactDOM.render(<App />, document.getElementById("app"));
Working sandbox: https://codesandbox.io/s/react-app-parcel-g9ff8
I am trying to use Link instead of anchor tag. In this Link tag i am using the to property but it gives me error, such as, "You must specify 'to' property".
code of Nav.jsx
import React from "react";
import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
<div className="container">
<Link className="brand-logo">Sherlock Holmes</Link>
<ul className="right">
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
Code of App.jsx
import React, { Component } from "react";
import NavBar from "./components/Nav";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
class App2 extends Component {
state = {};
render() {
return (
<BrowserRouter>
<div className="App">
<NavBar />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>
);
}
}
export default App2;
It gives me error on App.jsx page at ReactDom.render that you must specify 'to' property.
Problem
<Link className="brand-logo">Sherlock Holmes</Link>
doesn't have a to attribute
Solution
<Link to="/some_link" className="brand-logo">Sherlock Holmes</Link>
I integrated React in my laravel project. I started off using the react router but now I would like to switch back to Laravel routes.
Is it possible to inject my react components globally in my blade files just like Vue?
For setting up React routing I used following wildcard:
Route::view('/{path?}', 'layouts.app');
When I try to get back to normal laravel routing I get the following error
Error
Uncaught Error: Target container is not a DOM element.
My web.php
Route::get('/', 'PageController#index');
Controller
class PageController extends Controller
{
public function index()
{
return view('layouts.index');
}
}
Layouts.app file
<body>
<div class="main">
#section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
Index.blade
#extends('layouts.app')
#section('content')
<Call> </Call>
#endsection
React
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
import Call from './Call'
import Recipient from './Recipient';
import Avatar from './Avatar';
import registerServiceWorker from '../registerServiceWorker';
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/' component={Call} />
<Route exact path='/rusthuis' component={Recipient} />
<Route exact path='/avatar' component={Avatar} />
</Switch>
</div>
</BrowserRouter>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
registerServiceWorker();
The target container is not a DOM element because in your HTML you don't have a div with the id of app.
You should change your html to this for layouts.app:
<body>
<div id="app" class="main">
#section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
By default Laravel(6) already is utilizing id="app" so in your react index.blade.php, i.e. where you define your react entry point, use a different id name to prevent react App.js from overriding your normal Laravel files i.e:
index.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">
<!-- csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- styles -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app-react"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
App.js
import React from "react";
import { BrowserRouter as Router, Switch, } from "react-router-dom";
import Home from "./Home";
function App() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Home}></Route>
<Route component={Default}></Route>
</Switch>
</React.Fragment>
);
}
export default App;
if (document.getElementById("app-react")) {
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("app-react")
);
}
using the following route
Route::get('/{path?}',function(){
return view('app');
});
{path?} represent anything(word)
The first level URLs will affect the react but higher levels i.e
Route::view('/user/links','bladefile')
Links in our case will be a legit Laravel route.
put your
Route::view('/{path?}', 'layouts.app');
at end of web routes so that it will be loaded at last getting your all views