I'm having a hard time understanding how the routes and outlets work in react. My problem is this.
If I have a route that should load 3 parts.
-Top Menu
-Side Menu
-Center Content
But the center content is contained in the div thats wrapped by the "Side Menu" how do I wrap another element that will be changing inside of a previous component. My goal is to use the first 2 in all of the routes and based on the route the center content will change.
This is what it should look like
<div id="layoutSideNav">
<div id="layoutsidenav_nav"></div>
<div id="layoutSidenav_content"></div>
</div>
But for some reason all I can get is this
<div id="layoutSideNav">
<div id="layoutsidenav_nav"></div>
</div>
<div id="layoutSidenav_content"></div>
My react looks like this.
3 Components
Contains the top nav
contains the side nav
contains body elements that will change.
App()
<Route
path='/admin-dashboard'
element={
<>
<AdminNavigation />
<AdminNavigationLeft />
<AdminDashBoardHome />
</>
}
>
If I add <Outlet/> before the closing div in "layoutSideNav" component. nothing happens. If I remove the outlets from all components the app() looks the same. The top nav and side nave display correclty, but the center content is wonky.
I feel like routes is so much more abstract than I'm used to so maybe I'm just not thinking about it logically. Thank you so much for your help!
I tried using <Outlet/> to adjust how where the third component content displayed.
I've added my full code below for review.
const AdminNavigation = () =>{
const toggleSideMenu = event => {
// 👇️ toggle class on click
document.getElementsByTagName('body')[0].classList.toggle('sb-sidenav-toggled');
};
return (
<Fragment>
<nav className="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a className="navbar-brand ps-3" href="index.html">Woodmoore Improvement</a>
<button className="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" onClick={toggleSideMenu} id="sidebarToggle" href="#!"><i className="fas fa-bars"></i></button>
<form className="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
<div className="input-group">
<input className="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
<button className="btn btn-primary" id="btnNavbarSearch" type="button"><i className="fas fa-search"></i></button>
</div>
</form>
<ul className="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i className="fas fa-user fa-fw"></i></a>
<ul className="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a className="dropdown-item" href="#!">Settings</a></li>
<li><hr className="dropdown-divider" /></li>
<li><a className="dropdown-item" href="#!">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</Fragment>
)
}
export default AdminNavigation;
const AdminDashBoardHome = () => {
return(
<Fragment>
<div id='layoutSidenav_content'>
<main>
<div className='container-fluid px-4'>
<h1 className='mt-4'>HOA Member Manager</h1>
<ol className='breadcrumb mb-4'>
<li className='breadcrumb-item active'>Member Map</li>
</ol>
<div className='row'>
<div className='col-lg-12'>
<div className='embed-responsive embed-responsive-16by9'>
<div id='map_canvas' className='embed-responsive-item pb-4' >
</div>
</div>
</div>
</div>
<div className='row'>
</div>
<div className='card mb-4'>
<div className='card-header'>
<i className='fas fa-table me-1'></i>
Member Lookup
</div>
<MemberDataList/>
</div>
</div>
</main>
<footer className='py-4 bg-light mt-auto'>
<div className='container-fluid px-4'>
<div className='d-flex align-items-center justify-content-between small'>
<div className='text-muted'>Copyright © Your Website 2022</div>
<div>
<a href='#'>Privacy Policy</a>
·
<a href='#'>Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</Fragment>
)
}
export default AdminDashBoardHome;
const AdminNavigationLeft = () => {
document.body.classList.add('sb-nav-fixed');
return(
<Fragment>
<div id="layoutSidenav">
<Outlet/>
<div id="layoutSidenav_nav">
<nav className="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div className="sb-sidenav-menu">
<div className="nav">
<div className="sb-sidenav-menu-heading">Core</div>
<a className="nav-link" href="index.html">
<div className="sb-nav-link-icon"><i className="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<div className="sb-sidenav-menu-heading">Interface</div>
<a className="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
<div className="sb-nav-link-icon"><i className="fas fa-columns"></i></div>
Layouts
<div className="sb-sidenav-collapse-arrow"><i className="fas fa-angle-down"></i></div>
</a>
<div className="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav className="sb-sidenav-menu-nested nav">
<a className="nav-link" href="layout-static.html">Static Navigation</a>
<a className="nav-link" href="layout-sidenav-light.html">Light Sidenav</a>
</nav>
</div>
<a className="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
<div className="sb-nav-link-icon"><i className="fas fa-book-open"></i></div>
Admin Management
<div className="sb-sidenav-collapse-arrow"><i className="fas fa-angle-down"></i></div>
</a>
<div className="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
<nav className="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
<a className="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
Manage Users
</a>
<a className="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
Create New
</a>
</nav>
</div>
</div>
</div>
<div className="sb-sidenav-footer">
<div className="small">Logged in as:</div>
Start Bootstrap
</div>
</nav>
</div>
</div>
</Fragment>
)
}
export default AdminNavigationLeft;
If the following is what you intend to be rendered:
<div id="layoutSideNav">
<div id="layoutsidenav_nav"></div>
<div id="layoutSidenav_content"></div>
</div>
Then I suspect you want the routed content to be rendered in the layoutSidenav_content div. Something like the following:
<div id="layoutSideNav">
<div id="layoutsidenav_nav">
... navbar content ...
</div>
<div id="layoutSidenav_content">
... routed content ...
</div>
</div>
In other words, the above snippet describes a layout component, the routed content is the logical place for an Outlet component wrapping nested routes to output their element content into. The route may look like:
const AdminLayout = () => (
<>
<AdminNavigation />
<div id="layoutsidenav">
<div id="layoutSidenav_nav">
<AdminNavigationLeft />
</div>
<div id="layoutsidenav_content">
<Outlet />
</div>
</div>
</>
);
<Route
path='/admin-dashboard'
element={<AdminLayout />}
>
<Route index element={<AdminDashBoardHome />} />
... other admin routes
</Route>
const AdminNavigationLeft = () => {
useEffect(() => {
document.body.classList.add('sb-nav-fixed');
}, []);
return (
<nav className="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div className="sb-sidenav-menu">
...
</div>
</nav>
)
}
const AdminDashBoardHome = () => {
return (
<Fragment>
<main>
...
</main>
<footer className='py-4 bg-light mt-auto'>
...
</footer>
</Fragment>
)
}
I solved my own question.
You need to run the props through the component you're trying to display. The solution should be like this.
App()
<Route path='/admin-dashboard' element={<><AdminNavigation /><AdminNavigationLeft><AdminDashBoardHome/></AdminNavigationLeft></>}>
AdminDashLeft()
const AdminNavigationLeft = (props) => {
{props.children} // This is where the child component should display
}
I am building a react app that is using routes. To better work on a single "page", I use a code playground to mess with the code and aim to implement it into the final react app. However using routes complicates things and I want to know how to implement the script I know works. In the single page react app, my index.js (last snippet) checks elements in the html of one page (the 2 div's in the first code snippet) and will render components (second code snippet) based off the conditional. On my final react app, having multiple of these pages, I am not sure where or how to include the script, as the html document it uses is, itself, a component (first snippet).
//This div is the component that, on click, applies a component to be returned via jsx function. This is a component called ExercisesLauncher.jsx
<div id="Gym/Home/Upper/Lower/Cardio" class="col-lg-4 d-flex align-items-stretch">
<div
style={cursorPointer}
class="card w-100 mb-4 rounded-3 shadow-sm filter"
>
<div class="card-heading py-1">
<h1 class="normal-heading">Gym/Home/Upper/Lower/Cardio</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
//This div is created later in the same file, loading UpperLevel component, root was originally used in the html file (single page) to load components seen later in the question.
<div id="root" class="container">
<UpperLevel />
</div>
//This is the component that is to be loaded, and included are the other components I wish to swap out depending on if a div is clicked. UpperLevel is used in the ExercisesLauncher component
import React from "react";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridGym from "./GridGym";
import GridHome from "./GridHome";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";
function UpperLevel() {
return (
<div class="album py-5 container">
<GridCardio />
</div>
);
}
export default UpperLevel;
//This code was used for the single page not using routes, in the playground, the DOM references refer to the divs above, that are now in a .jsx file, not an HTML file
var gym = document.getElementById("Gym");
var home = document.getElementById("Home");
var upper = document.getElementById("Upper");
var lower = document.getElementById("Lower");
var cardio = document.getElementById("Cardio");
document.addEventListener("click", function (event) {
if (gym.contains(event.target)) {
ReactDOM.render(<GridGym />, document.getElementById("root"));
} else if (home.contains(event.target)) {
ReactDOM.render(<GridHome />, document.getElementById("root"));
} else if (upper.contains(event.target)) {
ReactDOM.render(<GridUpper />, document.getElementById("root"));
} else if (lower.contains(event.target)) {
ReactDOM.render(<GridLower />, document.getElementById("root"));
} else if (cardio.contains(event.target)) {
ReactDOM.render(<GridCardio />, document.getElementById("root"));
} else {
ReactDOM.render(<Grid />, document.getElementById("root"));
}
});
So far, I tried to paste the script inside the ExercisesLauncher component, as well as importing the necessary components, but the corresponding path just loads a white screen.
Instead of using unnecesarry components, I simply used the jsx code inside the App2 component that is used directly in my index file. I came up with a script that rerenders my grid component upon function call, which is triggered via click. I simply used hooks, useState, to do what I needed to do. Much easier than I thought!
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyGym} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyHome} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyUpper} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyLower} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;
This should do it:
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function Grid() {
const routes = [
{ path: "", name: "Gym", element: <GridGym /> },
{ path: "home", name: "Home", element: <GridHome /> },
{ path: "upper", name: "Upper", element: <GridUpper /> },
{ path: "lower", name: "Lower", element: <GridLower /> },
{ path: "cardio", name: "Cardio", element: <GridCardio /> }
];
return (
<>
<nav>
{routes.map((route) => (
<Link to={route.path} key={route.path}>
Grid{route.name}
</Link>
))}
</nav>
<Routes>
{routes.map((route) => (
<Route {...route} key={route.path} />
))}
</Routes>
</>
);
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="grid/">Grid</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="grid/*" element={<Grid />} />
</Routes>
</BrowserRouter>
);
}
I removed the irrelevant parts (e.g imports, etc...).
A full working example here: https://codesandbox.io/s/hungry-davinci-bgmswd?file=/src/App.js
Main takeaway: in React you don't check DOM. DOM renders according to model: you change the model and DOM reflects the change.
This question already has answers here:
Render is called twice when fetching data from a REST API
(3 answers)
Closed 2 years ago.
I try to get my pe list details on my single page when I click on the view details button but facing some issue so please help.
when i do {JSON.stringify(pet)} it gives a list of data proper but when I try to bind it's not showing any data but I check a network it gives proper data
my description.js component
import React, {useState, useEffect} from "react";
import {Link} from 'react-router-dom';
import Form from "./Form";
import Related from "./Related";
import WhySafari from "./WhySafari";
import {read} from "./apiCore";
const Description = (props) => {
const [pet, setPet] = useState({});
const [error, setError] = useState(false);
const loadsingelPet = id => {
read(id).then(data =>{
if(data.error){
setError(data.error);
}else{
setPet(data);
}
});
};
useEffect(() =>{
const id = props.match.params.id;
loadsingelPet(id);
}, [])
return(
<div>
<div className="bradcam_area breadcam_bg">
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="bradcam_text text-center">
<h3>{pet && pet.pbrd_display_name}</h3>
<ul>
<li><Link to="/">Home</Link> <i className="ti-angle-right"></i> </li>
<li><Link to="/list">Puppies for sale</Link> <i className="ti-angle-right"></i> </li>
<li><Link to="#">Golden Doodle</Link><i className="ti-angle-right"></i></li>
<li><Link to="#">German Shepherd</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<section className="sample-text-area">
<div className="container">
<div className="row">
{/* {JSON.stringify(pet)} */}
<div className="col-lg-6">
<div className="gallery-container">
<div className="swiper-container gallery-main">
<div className="swiper-wrapper">
<div className="swiper-slide">
<Link to="img/puppy/1.png" data-fancybox="group1">
<img src={"http://localhost:8000/storage/uploads/puppies/"+pet.pet_image_ids} alt={pet.pet_image_ids}/>
</Link>
</div>
</div>
</div>
<div className="left-thumb">
<div className="swiper-container gallery-thumbs">
<div className="swiper-wrapper">
<div className="swiper-slide">
<img src="img/puppy/1.png" alt="Slide 01" />
</div>
<div className="swiper-slide">
<img src="img/puppy/1.png" alt="Slide 01" />
</div>
<div className="swiper-slide">
<img src="img/puppy/1.png" alt="Slide 01" />
</div>
</div>
</div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="product-details">
<h1>{pet.pbrd_display_name}</h1>
<ul className="dtails-price">
<li className="real-price">$3449</li>
<li className="old-price">$4469</li>
</ul>
<div className="product-specification">
<h4><strong>Puppy Id : </strong> #656171</h4>
<h4><strong>Gender : </strong> {pet && pet.loc_contact_numbers }</h4>
<h4><strong>DOB : </strong> {pet && pet.plttr_birthdate }</h4>
<h4><strong>Location : </strong> {pet && pet.loc_receipt_name} </h4>
</div>
<div className="call-section">
<div className="call-left">
<img src="img/phone.svg" />
<h4>Need a nuppy guidience? <span>{pet && pet.loc_contact_numbers }</span></h4>
</div>
<div className="call-right">
<Link to="#" className="boxed-btn3">{pet && pet.pstatus_name }</Link>
</div>
</div>
<div className="decription-parra">
<h4>Description :</h4>
<p>{pet && pet.description}</p>
</div>
</div>
</div>
</div>
</div>
</section>
<Form/>
<WhySafari />
<Related />
</div>
);
}
export default Description;
please help. thanks in advance
Try useEffect like this:
useEffect(() =>{
const id = props.match.params.id;
loadsingelPet(id);
}, [props.match.params.id])
So it will re-run the effect if (props.match.params.id) changes and Ui will update too. React Documentation on hooks can be useful: https://reactjs.org/docs/hooks-effect.html
I create an app using create-react-app and after that I ejected it. Currently doing my test suite, I want to show my test coverage so I added "collectCoverage" : true under my package.json. After I run my test it doesnt show the percentage of my test coverage
Is there anything I need to do?
Here is the Links.test.jsx
import React from "react";
import { shallow, mount } from "enzyme";
import Links from "./Links";
it("should show correct links", () => {
const wrapper = mount(<Links />);
expect(wrapper).toMatchSnapshot();
});
Below is the Links component that was being tested
import React from "react";
const Links = () => {
return (
<div className="container mb-4 mt-4" id="Links">
<div className="h4 mb-3">OUR LINKS</div>
<div className="d-flex justify-content-between flex-wrap mw-90">
<a
href="https://site.ca/sites.aspx"
target="_blank"
className="buttonImage siteImage"
>
<div className="darkenBackground d-flex flex-column justify-content-center">
<div className="text-center h4">My Site</div>
</div>
</a>
<a href="#" target="_blank" className="buttonImage mapsImage">
<div className="darkenBackground d-flex flex-column justify-content-center">
<div className="text-center h4">Maps</div>
</div>
</a>
<a href="#" target="_blank" className="buttonImage loopImage">
<div className="darkenBackground d-flex flex-column justify-content-center">
<div className="text-center h4">Social</div>
</div>
</a>
<a href="#" target="_blank" className="buttonImage polcyImage">
<div className="darkenBackground d-flex flex-column justify-content-center">
<div className="text-center h4">
Acceptable Use <br /> and Security Policies
</div>
</div>
</a>
</div>
</div>
);
};
export default Links;
I am reading Bulma docs, took example to apply it on Codesandbox but the NavBar has a problem.
I imported Bulma as mentioned in docs, copied code, and I suppose Bulma is only css framework so no js to add.
The examples of Hero section that I am using can be found over here
The example provided with Hero head and Hero body and includes Nav bar is not working. The Navbar only as you see example here
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import "bulma/css/bulma.css";
function App() {
return (
<div className="App">
<section class="hero is-primary is-medium">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img
src="https://bulma.io/images/bulma-type-white.png"
alt="Logo"
/>
</a>
<span
class="navbar-burger burger"
data-target="navbarMenuHeroA"
>
<span />
<span />
<span />
</span>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">Home</a>
<a class="navbar-item">Examples</a>
<a class="navbar-item">Documentation</a>
<span class="navbar-item">
<a class="button is-primary is-inverted">
<span class="icon">
<i class="fab fa-github" />
</span>
<span>Download</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
</div>
</div>
<div class="hero-foot">
<nav class="tabs">
<div class="container">
<ul>
<li class="is-active">
<a>Overview</a>
</li>
<li>
<a>Modifiers</a>
</li>
<li>
<a>Grid</a>
</li>
<li>
<a>Elements</a>
</li>
<li>
<a>Components</a>
</li>
<li>
<a>Layout</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);