as im creating a reactjs project , i have devided my context into three separate files , therefore i ended up with three context providers , at first i wrapped all the context providers one by one around my components in app.js , but i figures maybe if i combined all the context providers in one component and use this component to wrap my app.js so i created the file with below code
import React from "react";
import CryptoContextProvider from "./crypto-context";
import NewsContextProvider from "./news-context";
import DataContextProvider from "./index-context";
const allContextProviders = (props) => {
return (
<>
<CryptoContextProvider>
<NewsContextProvider>
<DataContextProvider>{props.children}</DataContextProvider>
</NewsContextProvider>
</CryptoContextProvider>
</>
);
};
export default allContextProviders;
then i wrrap my app.js as follows
import allContextProviders from "./store/allContextProviders";
function App() {
return (
<allContextProviders>
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Navigate to="/welcome" />} />
<Route path="/welcome" element={<Home />} />
<Route path="/marketplace" element={<Marketplace />} />
<Route path="/tools" element={<ToolsServices />} />
yet when i trie to wrap my app.js with the allContextProviders component i get this following error
Line 12:8: 'allContextProviders' is defined but never used no-unused-vars
am i doing something wrong here? your feedback is appreciated
In React to tell it that the variable name is Component ( and please evaluate it ), the name of the component should start with a capital letter like AllContextProvider. Please change it's name so that React knows and it will evaluate it in run time.
Related
I'm making few practica but when I loaded the router into my new "project" in react-router-dom v6 the screen turns white like I compile the router wrong.
import React from "react";
import ReactDom from "react-dom";
import {BrowserRouter, Route, Routes } from "react-router-dom";
import { about } from ".//views/about.js"
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route exact path="/about" element={<about />} />
<Route path="/inicio" element={<home />} />
</Routes>
</BrowserRouter>
);
}
This is my about.js
import React from 'react'
export default function about() {
return <div>Soy una pagina de practica</div>
}
In other forum, I've told that use the <Switch> method, but I used react-router-dom v6 and need to use <Routes>. So if anyone can help I'd be grateful because I tried everything nothing seems to work me.
Proper React components are Capitalized.
Rendering a Component
Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags.
For example, <div /> represents an HTML div tag, but <Welcome />
represents a component and requires Welcome to be in scope.
To learn more about the reasoning behind this convention, please read
JSX In Depth.
The About component is also default exported, so it needs to also be default imported (as opposed to named exports/imports).
import About from "./views/about.js";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/inicio" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
...
export default function About() {
return <div>Soy una pagina de practica</div>
}
Change the App component as below:
import React from "react";
...
import About from "./views/about.js" // remove the curly braces as it's a default export
I am trying to render an ultra-simple webpage using react-routing-dom lib. Here is my app.js
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<Route exact path='/' element={<About />} />
<Route exact path='/shop' element={<Shop />} />
</Router>
</>
);
}
export default App;
using this, I run npm start and expect that the <Nav /> and <About /> components render at http://localhost:3000. Instead, the screen is completely blank. There are no warnings, errors, etc.; it's a clean build. Not even the <Nav /> component that is outside the entire Router block is rendered!
The plot thickens: when I build and run the following, all three components render.
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<About />
<Shop />
</Router>
</>
);
}
export default App;
From this, I think its safe to assume that <Route /> is the problem.
react-router-dom seems to change a lot in a relatively short amount of time, so there is a lot of outdated info. If someone could point me in the right direction, I would be very grateful indeed.
Only thing I see missing is the Routes component wrapping the Route components. You imported Routes but don't appear to have used it. All Route components must be rendered into a Routes component (or another Route if nesting). Without the Routes you should be seeing the error A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
<Router>
<Routes>
<Route exact path="/" element={<About />} />
<Route exact path="/shop" element={<Shop />} />
</Routes>
</Router>
Check if you have installed react-router-dom version 6. for version 6 you must wrap up all 'Route' inside a "Routes".
I have layout that header and footer components named as MainLayout.
This layout used in Home page.
I want to make another layout that named SubLayout.
This is not have header component, and used in About page.
How to make 2 different layout?
This is what I tried so far below.
Router.js
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import MainLayout from '../components/layouts/MainLayout'
import Home from '../views/home/Home'
import About from '../views/about/About'
export default function Router1() {
return (
<Router>
<Switch>
<Route>
<MainLayout>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
</Switch>
</MainLayout>
</Route>
</Switch>
</Router>
)
}
MainLayout
import React from 'react'
import Header from '../../components/layouts/Header'
import Footer from '../../components/layouts/Footer'
export default function Layout({ children }) {
return (
<div className="wrapper">
<Header />
<div className="container">
<div className="content">
{children}
</div>
</div>
<Footer />
</div>
)
}
SubLayout.js
import React from 'react'
import Footer from '../../components/layouts/Footer'
export default function Layout({ children }) {
return (
<div className="wrapper">
<div className="container">
<div className="content">
{children}
</div>
</div>
<Footer />
</div>
)
}
This is not a trivial problem and happens to a lot of website, especially after you have quite a bit pages.
Solution 1
Coding the layout in MainLayout is difficult since you basically have to fix every possible case of this website from now on, which is a challenge.
In order to avoid that, you can have a separate layout component for each page. ex.
export default function Page1() {
return (
<Header />
<YourPage1Content />
)
}
Although this is a bit extra work for each page, it's very flexible. And the solution is highly scalable no matter how many pages (or features, or sites) that you want to support. For example, you can even wire with entirely different header if you want for a particular page.
Solution 2
If you are looking for a generic way of solving this problem and still want to have a MainLayout since this is the wrapper for every pages, it can be done via Context.
export default function MainLayout() {
const { hideHeader } = useContext(LayoutContext)
return (
<>
{!hideHeader && <Header />}
{children}
</>
)
The context will be provided to you via route, or any custom Context.Provider which can be setup in your App.js or index.js
For instance for a particular route,
export default function MainLayout() {
const location = useLocation()
const hideHeader = location.pathname === '/'
return (
<>
{!hideHeader && <Header />}
{children}
</>
)
This approach is quite generic and highly scalable as well, as long as the same context is used for the entire site.
Summary
If you don't know what site you are building, use solution 1, it'll meet any requirement along the way. However if you have a specific need to meet, solution 2 is really pretty to make sure you can live with a generic Layout component.
All in all, it's about how many Layout component you'd like to reuse.
You can wrap either your whole component with the specific layout or you can wrap the route with specific layout to differentiate like,
export default function Router1() {
return (
<Router>
<Switch>
<MainLayout>
<Route path='/' exact component={Home} />
</MainLayout>
<SubLayout>
<Route path='/about' component={About} />
</SubLayout>
</Switch>
</Router>
)}
And there are unnecessary switch and route statements, cleaned it up a little.
I am working on existing code base for a react application. I am new to React and the developer who wrote this left.
In my current code base "request-promise-native" is pass from one component to another component using props. I don't get this. Why not just import it again in every component?
App.tsx
import rp from 'request-promise-native';
const App: React.FC = () => {
return (
<Router>
<Route path="/" render={(props) => <Main {...props} rp={rp} />}></Route>
</Router>
)
};
After reading the documentation of https://www.npmjs.com/package/request-promise it appears this is completely pointless and you are correct about imports.
im trying to format my HTML like so within the body tag:
<header id="header"></header>
<main id="app"></main>
<footer id="footer"></footer>
reason why is so that i have my navigation out of <main></main> and in <header></header>
Im also rendering the corresponding React component individually i.e: document.getElementById("header"), document.getElementById("app") ...:
ReactDOM.render(
<Header />,
document.getElementById("header")
);
When clicking <Link to="/log-in"></Link> in <Header /> it breaks out of SPA and jumps to /log-in page.
What am i missing here?
Using ReactDOM.render multiple times will create separate instances unaware of each other source.
Let's go on about restructuring that a bit to make your app feel better:
App.js
import React from 'react';
import { Main } from './components';
const App = () => (
<Main />
)
ReactDOM.render(<App />, document.getElementById("app"));
Main.js
import React from 'react';
import { Router, Route } from 'react-router-dom';
import { Header, Login, Register, Home } from './components'
const Main = () => (
<Router>
<React.Fragment>
<Header />
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Footer />
</React.Fragment>
</Router>
)
export { Main };
So this way, we're ever only really rendering one instance. Your header/footer would be placed outside of the router, so whenever the route changes, they remain unaffected. Keep in mind that this will present a challenge, eg if you want your Header to highlight which route is active, the simples way, since it's outside of router and doesn't receive props from it, is to check the url. Also note that we're using <React.Fragment> here, but you're free to use a <div> or anything else you like. Router expect one child only, so if you don't want additional html elements, you can use a fragment!