Comments (3)
Please try to add Router in index.js not inside App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import App from './App';
const element = (
<Router>
<App />
</Router>
);
const container = document.getElementById('root');
ReactDOM.render(element, container);
That's work for me
Ref. : https://typescript.tv/react/upgrade-to-react-router-v6/
from material-kit-react.
When trying @Pasitto solution, I get:
×
Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.
This is my index.js:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
And App.js
:
--- SNIP ---
import routes from "./config/routes";
export default () => {
const routeResult = useRoutes(routes);
return (
--- SNIP ---
<Content>{routeResult}</Content>
--- SNIP ---
);
};
from material-kit-react.
You should have a (or any of the provided routers) higher up in the tree. The reason for this is that the provides a history context which is needed at the time the routes are created using useRoutes(). Note that higher up means that it can't be in the itself, but at least in the component that renders it.
Here's what your entry point could look like:
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
from material-kit-react.
Related Issues (20)
- Update to MUI v5 HOT 1
- Refreshing page when using auth0 causes logout. HOT 1
- How do I integrate redux? HOT 2
- Can not make it work HOT 1
- How to create multiple menu?
- A PostCSS Plugin was passed as a function using require(), but it must be provided as a string
- Uncaught Error while using `useRoutes`: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. HOT 1
- still supporting CRA in free or pro version? HOT 1
- How to keep loading screen on until the end of data call for the edit post screen? HOT 1
- running error HOT 3
- Error "Module not found" HOT 3
- Demo has error
- Running Error - #130 Similarity HOT 1
- next export lacking all html tags
- The navbar toggle button doesn't work HOT 3
- How to pass an initial array into useSelection?
- Link to Figma file broken HOT 4
- Devias Dashboard Design Library Kit broken Link HOT 3
- Free Figma Comunity File Not Found (404) HOT 2
- project is not running with nextJS 14.0.4 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-kit-react.