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'));
Related
My build was working fine yesterday, now when I run a build and run npm start, I get a client side error that crashes the app.
The only way to fix it is to remove next/head.
I have stripped down my app to one index.jsx file with only the following:
import Head from "next/head";
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
);
}
export default IndexPage;
_document.js
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
import Header from "../components/Header";
export default function Document() {
return (
<Html lang="en">
<body class="onepage">
{/* <Header /> */}
<Head />
<Main />
<NextScript />
{/* <script src="/scripts/plugins.js"></script>
<script src="/scripts/theme.js"></script> */}
</body>
</Html>
);
}
app.js
import "../styles/style.css";
import "../styles/plugins.css";
import Script from "next/script";
import Layout from "#/components/Layout/Layout";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
<Script src="/scripts/plugins.js" />
<Script strategy="lazyOnload" src="/scripts/theme.js" />
</Layout>
);
}
When I open localhost:3000 on the build, it is infinitely spamming the same console error:
TypeError: Cannot read properties of null (reading 'content')
What could possibly be going on?
Also, I tried deleting my .nuxt,node_modules folders and package-lock.json, still nothing.
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.
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.
I'm trying to implement react-router but I'm getting the error below:
Failed propType: Required prop to was not specified in Link. Check
the render method of app.
I'm not sure what is wrong with my code.
./app/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
// Layouts
import App from 'layouts/app';
// Components
import Portfolio from 'ui/portfolio';
import Blog from 'ui/blog';
import TimeLine from 'ui/timeline';
import About from 'ui/about'
import Contact from 'ui/contact'
ReactDOM.render((
<Router history={browserHistory}>
<Route component={App}>
<Route path="/" component={Portfolio} />
<Route path="/blog" component={Blog} />
<Route path="/timeline" component={TimeLine} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Route>
</Router>
), document.getElementById('root'));
./app/layouts/app.js
import React from 'react';
import { Link } from 'react-router';
export default React.createClass({
render: function() {
return (
<div className="app">
<nav>
<Link to="/">Portfolio</Link><br />
<Link to="/blog">Blog</Link><br />
<Link toc="/timeline">TimeLine</Link><br />
<Link toc="/about">About</Link><br />
<Link toc="/contact">Contact</Link>
</nav>
<main>
{this.props.children}
</main>
</div>
)
}
});
You can see below the dependencies I'm using.
"dependencies": {
"axios": "^0.9.0",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.6",
"react-router": "^2.0.0",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3"
},
"devDependencies": {
"babel-core": "^6.3.13",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-2": "^6.3.13",
"gulp": "^3.9.0",
"gulp-serve": "^1.2.0",
"json-server": "^0.8.6",
"webpack-stream": "^3.1.0"
}
Any idea what is happening?
Thanks!
<Link toc="/timeline">TimeLine</Link><br />
<Link toc="/about">About</Link><br />
<Link toc="/contact">Contact</Link>
You want to not toc
<Link to="/timeline">TimeLine</Link><br />
<Link to="/about">About</Link><br />
<Link to="/contact">Contact</Link>