I am building an E-Commerce MERN Stack Web Application. The loading time of my Home Page as tested by Lighthouse is more than 12s.
I have hence posted the App.js file and my main main homepage.js file.
How can I implement code splitting on my homepage.js file (using Lazy-Suspense method o any other)?
homepage.js
import React, { Component } from 'react';
import Header from '../header/header';
import About from '../about/about';
import Services from '../services/services';
import Footer from '../footer/footer';
import Navbar from '../navbar/navbar';
export default class Homepage extends Component {
state = {
response: '',
email: '****.com',
password:'****',
message:'',
};
render() {
let loggedIn = this.props.loggedIn;
console.log(loggedIn)
return (
<div className="App">
<Navbar />
<Header resumeData={{name:this.state.email,}}/>
<Services resumeData={{name:this.state.email,}}/>
<About resumeData={{name:this.state.email,}}/>
<Footer resumeData={{name:this.state.email,}}/>
</div>
);
}
}
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Homepage from './components/homepage/homepage';
import LogIn from './components/login/login';
import SignUp from './components/signup/signup';
import Reset from './components/reset/reset';
import Account from './components/account/account';
import Verify from './components/verify/verify';
import Shop from './components/shop/shop';
import Cart from './components/cart/cart';
import Checkout from './components/cart/checkout';
import Admin from './components/admin/admin';
import Order from './components/order/order';
import Subscription from './components/order/subscription';
import Subscribe from './components/subscribe/subscribe';
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={Homepage} exact/>
<Route path="/shop" component={Shop} />
<Route path="/cart" component={Cart} />
<Route path="/checkout:what" component={Checkout} />
<Route path="/subscribe" component={Subscribe} />
<Route path="/order:oId" component={Order} />
<Route path="/subscription:sId" component={Subscription} />
<Route path="/login" component={LogIn}/>
<Route path="/admin" component={Admin}/>
<Route path="/signup" component={SignUp}/>
<Route path="/reset" component={Reset}/>
<Route path="/account" component={Account}/>
<Route path="/verify/:token" component={Verify}/>
</Switch>
</BrowserRouter>
);
}
}
export default App;
this how you code split your react js app:
import React,{lazy,Suspense} from 'react'
const Child = lazy(()=>import('./ChildComponent'))
const Parent = ()=> <Suspense fallback={<Loader/>}><Child/></Suspense>
here is full detailed explanation : React Code splitting
Related
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Discussion from './discussion.js';
import Rules from './rules.js';
import Workflow from './workflow.js';
export default function() {
return (
<div>
hello
<Switch>
<Route exact path="/" component={Discussion} />
<Route exact path="/rules" component={Rules} />
<Route exact path="/workflow" component={Workflow} />
</Switch>
</div>
)
}
I'm importing the function called 'PageContent' from './page-content'
calling it with in app.js
Then the page goes blank
I have code as below. I want Navigation component to appear on Home and About page, but not in Contact. How can I do that ?
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Just add a condition to check if your route is contact or not and don't render the content of Navigation by returning null. You can get the url using window.location.
I am new to React and practicing with an online website for repairing appliances. I have used react-router and created all my routes in a separate file.
I have a problem though, I can open any link from the address bar like:
http://localhost:3000/<randomword>
I only want routes to be opened that I have declared in my routes component while if I type http://localhost:3000/something, I get an empty page with my header and footer in it.
here are my codes:
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Routes from './Routes';
import './index.css';
const App = () => {
return(
<BrowserRouter>
<Routes />
</BrowserRouter>
)
}
ReactDOM.render(<App/>,document.getElementById('root'));
App.js:
import React, {Component} from 'react';
import { Route, BrowserRouter } from 'react-router-dom';
import Layout from './Containers/Layout';
import LandingPage from './Containers/Pages/LandingPage';
import About from './Containers/Pages/About';
import Cities from './Containers/Pages/Cities';
import Discount from './Containers/Pages/Discount';
class Routes extends Component {
render(){
return (
<div>
<Layout>
<BrowserRouter>
<Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
<Route path="/About" component={About}/>
<Route path="/Cities" component={Cities}/>
<Route path="/Discount" component={Discount}/>
</BrowserRouter>
</Layout>
</div>
);
}
};
export default Routes;
Layout.js:
import React, { Component } from 'react';
import Header from "./Layouts/Header";
import Footer from './Layouts/Footer';
import './Layout.css';
export default class Layout extends Component {
constructor(){
super();
this.state= {
}
}
render() {
return (
<div className="page-container">
<Header/>
<div className="content-wrap">
{this.props.children}
</div>
<Footer/>
</div>);
}
}
Can someone help me figure out how I should stop random random pages to be opened from addressbar?
Just want to start by saying I'm completely self-taught with React so I apologize if this answer is incorrect. However, in my experience with react-router I always have a Switch inside of my BrowserRouter. So your Routes class in app.js should something like this:
class Routes extends Component {
render(){
return (
<div>
<Layout>
<BrowserRouter>
<Switch>
<Route path="/" render={props => <LandingPage {...props} />} exact component={LandingPage}/>
<Route path="/About" component={About}/>
<Route path="/Cities" component={Cities}/>
<Route path="/Discount" component={Discount}/>
</Switch>
</BrowserRouter>
</Layout>
</div>
);
}
};
Just be sure you don't forget to update your imports to
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import { Redirect } from "react-router-dom"
<Route path="/not-found" component={notFound-Component} />
<Redirect to="/not-found" />
This will always redirect you to 404 component if route is not present just make a 404 component and u should add the redirect at the end after all routes are defined
I am trying to connect my personal website made using ReactJS to Google Analytics. I have followed this tutorial but I am still not able to see an active user (when I access the site on local host or when I deploy it using netlify).
Here is my app.js:
import React, {useEffect} from 'react';
import Courses from './containers/Courses/Courses';
import Home from './containers/Home/Home';
import {Route, Switch, Redirect} from 'react-router-dom';
import Layout from './hoc/Layout/Layout';
import About from './containers/About/About';
import ContactPage from './containers/ContactPage/ContactPage';
import Projects from './components/Projects/Projects';
import ReactGa from 'react-ga';
const App = () => {
useEffect(() => {
document.title = "Dhruv Mittal";
ReactGa.initialize('UA-XXXXXXXXX-X');
//Report page view
ReactGa.pageview(window.location.pathname + window.location.search);
}, []);
let routes = (
<Switch>
<Route path="/about" component={About}/>
<Route path="/projects" component={Projects}/>
<Route path="/courses" component={Courses}/>
<Route path="/contact" exact component={ContactPage}/>
<Route path="/" component={Home}/>
<Redirect to='/'/>
</Switch>
);
return (
<div>
<Layout>
{routes}
</Layout>
</div>
);
}
export default App;
You are not listening to the location changes. Try this way. Add a component called GAListener, which listen to the location changes of history object.
GaListener.js
import React from 'react';
import ReactGA from 'react-ga';
import { withRouter } from 'react-router-dom';
class GAListener extends React.Component {
componentDidMount() {
ReactGA.initialize("UA-XXXXXXXXX-X");
this.sendPageView(this.props.history.location);
this.props.history.listen(this.sendPageView);
}
sendPageView = location => {
ReactGA.set({ page: location.pathname });
ReactGA.pageview(location.pathname);
};
render() {
return this.props.children;
}
}
export default withRouter(GAListener);
Now wrap your Route components inside GAListener component as follows.
App.js
const App = () => {
let routes = (
<GAListener>
<Switch>
<Route path="/about" component={About}/>
<Route path="/projects" component={Projects}/>
<Route path="/courses" component={Courses}/>
<Route path="/contact" exact component={ContactPage}/>
<Route path="/" component={Home}/>
<Redirect to='/'/>
</Switch>
</GAListener>
);
return (
<div>
<Layout>
{routes}
</Layout>
</div>
);
}
export default App;
I have my application that works with a hash router with routes like "login" "register" "dashboard" and I would like to integrate react-admin. I would like to use react admin on my /admin route.
What I do:
App.js
import React, {Component} from 'react';
import {HashRouter as Router, Route} from 'react-router-dom';
import {Provider} from 'react-redux'
import Store from './store/configureStore'
import RegisterView from "./view/RegisterView"
import LoginView from "./view/LoginView"
import DashboardView from "./view/DashboardView"
import AdminView from "./view/AdminView"
import jsonServerProvider from "ra-data-json-server";
import { Admin, Resource, BooleanField } from "react-admin";
import { UserList, UserEdit, UserCreate } from './users';
const dataProvider =
jsonServerProvider("https://jsonplaceholder.typicode.com");
class App extends Component {
// Provider store is used to use the store of the redux
// Router is used to define the route and the component to display
render() {
return (
<div>
<Provider store={Store}>
<Router basename="/">
<div>
<Route exact path="/" component={LoginView}>
</Route>
<Route exact path="/register" component={RegisterView}>
</Route>
<Route exact path="/login" component={LoginView}>
</Route>
<Route exact path="/dashboard" component={DashboardView}>
<Route exact path="/admin" component={AdminView}>
<Admin dataProvider={dataProvider}>
<Resource
name="users"
list={UserList}
edit={UserEdit}
create={UserCreate}
/>
</Admin>
</Route>
</div>
</Router>
</Provider>
</div>
);
}
}
export default App;
it displays my react-admin but with my other components (display bug). I would like the react-admin part only in my /admin routes.
For me, the section should only be working in the /admin because i gave this path to my route.
What don't I understand?