We are working on project of clone of flipkart.com.We are working on team.so we have distributed our works. One of guy worked on landing page with material UI and i am working on product page with chakra ui but after merging app is not working and producing unfamiliar error.
So, provide some solution so we can make our presentation.
in index.js i have written this code
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import FlipkartStore from './Components/Redux_Implementation/Store/Store';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from '#material-ui/core/styles';
import { createTheme } from '#material-ui/core/styles';
import { ChakraProvider, extendTheme } from '#chakra-ui/react';
const muiTheme = createTheme();
const theme = extendTheme();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={FlipkartStore}>
<ChakraProvider theme={theme} >
<ThemeProvider theme={muiTheme}>
<BrowserRouter>
<App />
</BrowserRouter>
</ThemeProvider>
</ChakraProvider>
</Provider>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
its showing this error
if am removing chakra provider page is working but my product page css is not working
You can wrap the ChakraProvider only for your page as needed.
If you are using React Router. You could wrap the provider only for your path.
Example:
<Switch>
<Route path="/products">
<ChakraProvider> /* 👈 wrap only for your products page */
<Products />
</ChakraProvider>
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
wrap your route inside ChakraProvider.
<Switch>
<Route path='/your_path'>
<ChakraProvider>
<YourComponent />
</ChakraProvider>
</Route>
<Route path ='/your_path_2' element={<YourOtherComponent />} />
</Switch>
Just wrap your route inside the route.
The component you want to use you can wrap it in chakra provider.
<Route path='/'>
<ChakraProvider>
<Component you want />
</ChakraProvider>
</Route>
Worked for me:
<ThemeProvider theme={muiTheme}>
<ChakraProvider theme={chakraTheme}>
...
</ChakraProvider>
</ThemeProvider>
Related
Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);
In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
Note: I've tried a dozen examples. Some I did find here. None work for me.
I did get Links in React to work sort of, but they add a component to the page, rather than replacing it.
I understand to fix that issue that I need to wrap app in BrowserRouter, but every way I try makes the whole site render blank.
So in <Provider store={store}><App /></Provider> below, if I try to put <BrowserRouter> tags either outside or inside the <Provider> tags, the site renders blank. What I am missing?
Here is my index.js:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import reportWebVitals from "./reportWebVitals";
import { store } from "./store";
import { Provider } from "react-redux";
//header, footer, theme
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
reportWebVitals();
My router.js:
// Routes.js
import React from "react";
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Home from "./pages/home";
import About from "./pages/about";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route exact path='/' element={<Home />} />
<Route path='/About' element={<About />} />
</Routes>
</BrowserRouter>
);
};
export default Router;
And my app.js:
import { useEffect } from "react";
// mui
import { Container } from "#mui/material";
import { ThemeProvider } from "#mui/system";
// theme
import theme from "./styles/theme";
// components
import Footer from "./components/footer";
import Appbar from "./components/appbar";
// styles
import "./App.css";
import About from "./pages/about";
/*import Events from './components/Events/Events';*/
import {Route, Routes } from 'react-router-dom';
import Router from "./router";
// components
import ListArticles from "./components/list-articles";
function App() {
useEffect(() => {
document.title = "Home";
}, []);
return (
<ThemeProvider theme={theme}>
<Container
disableGutters
maxWidth="xl"
sx={{
background: "#fff",
}}
>
<Appbar />
<Router />
<Footer />
</Container>
</ThemeProvider>
);
}
export default App;
Note: As soon as I comment out Browser router in my index.js, the site content loads. When I put the browser router tag back, site content is blank. Same affect if browser router tag is inside provider tags.
/* <BrowserRouter>*/
<Provider store={store}>
<App />
</Provider>
/*</BrowserRouter>*/
I figured it out. I hope this helps somebody. I needed to add it like the below code in my app.js. Browser Router doesn't belong anywhere else but here, so I removed it from my router.js. Now I can add routes to router.js and links where needed.
<BrowserRouter>
<ThemeProvider theme={theme}>
<Container
disableGutters
maxWidth="xl"
sx={{
background: "#fff",
}}
>
<Appbar />
<Router />
<Footer />
</Container>
</ThemeProvider>
</BrowserRouter >
Example of a link:
<Link to="/about">About</Link>
You need only one router to provide a routing context to an entire app. If you are wrapping your routes in one router and your appbar/links in another router then these routers/routing contexts will work independently from each other. In other words, what navigation actions/etc issued or handled in one have no bearing on any navigation actions/etc issued or handled by the other.
Render a single BrowserRouter higher in the ReactTree than any of the components trying to consume the routing context.
Example:
index.js
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
App
import Router from "./router";
function App() {
useEffect(() => {
document.title = "Home";
}, []);
return (
<ThemeProvider theme={theme}>
<Container
disableGutters
maxWidth="xl"
sx={{ background: "#fff" }}
>
<Appbar />
<Router />
<Footer />
</Container>
</ThemeProvider>
);
}
Appbar
import { Link } from "react-router-dom";
const Appbar = () => {
...
return (
...
<div className="wrapper">
<Link to="/about">About</Link>
....
</div>
);
};
Router
import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
const Router = () => (
<Routes>
<Route path='/' element={<Home />} />
<Route path='/About' element={<About />} />
... other routes
</Routes>
);
export default Router;
You're missing the EXACT property in your route. If you don't add it to your initial Route component ('/'), the route will still be recognized as correct.
<Route exact path='/' element={<Home />} />
I am having a react-router problem in production build. Every thing works fine in development, but whenever I build a production using npm run build and then open the index.html file in the build folder, I only get the Header and Footer portion of the website, and when I try navigating to the links on the header I get an error that says "your file could not be accessed". Navigating to the Home link takes me to the c: directory on computer instead of just reloading the page I was on.
I have no idea what's going on. But I believe it might be from the Router.
Thank you.
Here is the code:
router.js
import {
BrowserRouter,
Routes,
Route,
} from 'react-router-dom';
import Home from '../components//pages/home';
import Infra from '../components/pages/infra';
import Outreach from '../components/pages/outreach';
import AboutUs from '../components/pages/aboutUs';
import ProgressOfWork from '../components/pages/progressOfWork';
const Router = () =>
<BrowserRouter basename=''>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="infra" element={<Infra />} />
<Route path="outreach" element={<Outreach />} />
<Route path="aboutUs" element={<AboutUs />} />
<Route path="progressOfWork" element={<ProgressOfWork />} />
</Routes>
</BrowserRouter>
export default Router;
App.js
import Router from './routes/routes';
import Header from './utilities/header';
import Footer from './utilities/footer';
function App() {
return (
<div>
<Header />
<Router />
<Footer />
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I have a navbar that is rendered in every route while the route changes on click.
./components/navbar.jsx
import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div id = 'navbar'>
<div className='name-head'>
My Name
</div>
<div id = 'nav-links-container'>
<Link to='/experiences'>
<div className = 'nav-links'>
Experiences
</div>
</Link>
<div className = 'nav-links'>
Projects
</div>
<div className = 'nav-links'>
Skills
</div>
<div className = 'nav-links'>
Resume
</div>
</div>
</div>
);
}
}
export default Navbar;
./components/experiences.jsx
import React, { Component } from 'react';
class Experiences extends Component {
render() {
return (
<div>
<h1>hi</h1>
</div>
);
}
}
export default Experiences;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Experiences from './components/experience';
import {
BrowserRouter as Router,
Routes,
Route
} from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Navbar />
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Routes>
</Router>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
The error doesn't come when I remove the <Link> from the experiences tag in navbar.
There is a similar question posted here: Error: useHref() may be used only in the context of a <Router> component
but doesn't help.
I'm using react router v6
Issue
You are rendering the navbar outside the routing context. The Router isn't aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to "/experiences" is because the Router is aware of the URL when the app mounts.
<Navbar /> // <-- outside router!!
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Routes>
</Router>
Solution
Move it inside the routing context so the Router is aware and can manage routing correctly.
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Routes>
</Router>
react-router-dom#6.4 Data APIs
If you are using the new Data routers you can hit this issue if you attempt to render a header/navbar outside the RouterProvider component. For this you can create a layout route that is part of the routing configuration passed to createBrowserRouter (and other variants).
Example:
const AppLayout = () => (
<>
<Navbar />
<Outlet />
</>
);
const router = createBrowserRouter(
createRoutesFromElements(
<Route element={<AppLayout />}>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Route>
)
);
...
<RouterProvider router={router} />
in React Route v6 you can solve this giving the route context to your entire App with <BrowserRouter>
This is an complete example of index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { App } from './components/App/App.jsx';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter> //that is the key
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
If you are still having problem with this one, it is because react-router-dom relies on React context to work when you try to unit-test it. This makes <Link /> or <Route /> obsolete.
Try reading the react-router-dom documentation.
Instead of using
render(<Example />)
that have either or inside it, you can try
render(<MemoryRouter>
<Example />
</MemoryRouter>)
Hope this solves your problem
In react-router-dom:6.x and react:18.x, we should use the Router in the following way to resolve the issue:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { App } from './App.js';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Router> // Router
<App /> // Application
</Router>
</React.StrictMode>
);
Links are inside Navbar &
Navbar is outside of Router
=> links are outside of Router => Router will not manage Links
Solution
Move the Navbar into Router section. Example:
<Router>
<Navbar /> // <===========
<Routes>
<Route />
<Route />
</Routes>
</Router>
Wrap navbar with BrowserRouter
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
<AppNavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/wall" element={<WallPost />} />
</Routes>
</BrowserRouter>
Install in your project React Router v6.
npm install react-router-dom#6
Then use BrowserRouter in your index.js file, below like this:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
React Router v6 this problem common one, you can simply replace "index.js" code. you will got solution-
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
This error happens because Link component needs to reach out to react-router context object. Your Navbar component is using Link component but Navbar is not wrapped by router context.
A similar error happens in a testing environment. If you have a component that uses Link component and if you render this component in a testing environment, you will get the same error because Link component needs to access a router context. In the case of test environment:
import { render } from "#testing-library/react";
// this will throw same error
test("testing", () => {
render(<ComponentRendersLink/>);
});
Solution in this case to wrap it with a router
// there are more router options
import { MemoryRouter } from "react-router-dom";
render(
<MemoryRouter>
<ComponentRendersLink />
</MemoryRouter>
);
This is very much an edge case, but in my case it turned out a lib I develop had react-router-dom: 6.0.2 installed and project that uses it v6.3.0
Your links just needs to be within a BrowserRouter component since you use v6
After importing
<BrowserRouter>
<Link to='page'>
</BrowserRouter>
I have a navbar that is rendered in every route while the route changes on click.
./components/navbar.jsx
import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div id = 'navbar'>
<div className='name-head'>
My Name
</div>
<div id = 'nav-links-container'>
<Link to='/experiences'>
<div className = 'nav-links'>
Experiences
</div>
</Link>
<div className = 'nav-links'>
Projects
</div>
<div className = 'nav-links'>
Skills
</div>
<div className = 'nav-links'>
Resume
</div>
</div>
</div>
);
}
}
export default Navbar;
./components/experiences.jsx
import React, { Component } from 'react';
class Experiences extends Component {
render() {
return (
<div>
<h1>hi</h1>
</div>
);
}
}
export default Experiences;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Experiences from './components/experience';
import {
BrowserRouter as Router,
Routes,
Route
} from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Navbar />
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Routes>
</Router>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
The error doesn't come when I remove the <Link> from the experiences tag in navbar.
There is a similar question posted here: Error: useHref() may be used only in the context of a <Router> component
but doesn't help.
I'm using react router v6
Issue
You are rendering the navbar outside the routing context. The Router isn't aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to "/experiences" is because the Router is aware of the URL when the app mounts.
<Navbar /> // <-- outside router!!
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Routes>
</Router>
Solution
Move it inside the routing context so the Router is aware and can manage routing correctly.
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Routes>
</Router>
react-router-dom#6.4 Data APIs
If you are using the new Data routers you can hit this issue if you attempt to render a header/navbar outside the RouterProvider component. For this you can create a layout route that is part of the routing configuration passed to createBrowserRouter (and other variants).
Example:
const AppLayout = () => (
<>
<Navbar />
<Outlet />
</>
);
const router = createBrowserRouter(
createRoutesFromElements(
<Route element={<AppLayout />}>
<Route path="/" element={<Home />} />
<Route path="/experiences" element={<Experiences />} />
</Route>
)
);
...
<RouterProvider router={router} />
in React Route v6 you can solve this giving the route context to your entire App with <BrowserRouter>
This is an complete example of index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { App } from './components/App/App.jsx';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter> //that is the key
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
If you are still having problem with this one, it is because react-router-dom relies on React context to work when you try to unit-test it. This makes <Link /> or <Route /> obsolete.
Try reading the react-router-dom documentation.
Instead of using
render(<Example />)
that have either or inside it, you can try
render(<MemoryRouter>
<Example />
</MemoryRouter>)
Hope this solves your problem
In react-router-dom:6.x and react:18.x, we should use the Router in the following way to resolve the issue:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { App } from './App.js';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Router> // Router
<App /> // Application
</Router>
</React.StrictMode>
);
Links are inside Navbar &
Navbar is outside of Router
=> links are outside of Router => Router will not manage Links
Solution
Move the Navbar into Router section. Example:
<Router>
<Navbar /> // <===========
<Routes>
<Route />
<Route />
</Routes>
</Router>
Wrap navbar with BrowserRouter
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
<AppNavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/wall" element={<WallPost />} />
</Routes>
</BrowserRouter>
Install in your project React Router v6.
npm install react-router-dom#6
Then use BrowserRouter in your index.js file, below like this:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
React Router v6 this problem common one, you can simply replace "index.js" code. you will got solution-
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
This error happens because Link component needs to reach out to react-router context object. Your Navbar component is using Link component but Navbar is not wrapped by router context.
A similar error happens in a testing environment. If you have a component that uses Link component and if you render this component in a testing environment, you will get the same error because Link component needs to access a router context. In the case of test environment:
import { render } from "#testing-library/react";
// this will throw same error
test("testing", () => {
render(<ComponentRendersLink/>);
});
Solution in this case to wrap it with a router
// there are more router options
import { MemoryRouter } from "react-router-dom";
render(
<MemoryRouter>
<ComponentRendersLink />
</MemoryRouter>
);
This is very much an edge case, but in my case it turned out a lib I develop had react-router-dom: 6.0.2 installed and project that uses it v6.3.0
Your links just needs to be within a BrowserRouter component since you use v6
After importing
<BrowserRouter>
<Link to='page'>
</BrowserRouter>