Today when I started up the iMac to continue working on the ReactJS app...it doesn't load...
What I mean by "load" is, it doesn't display the content of any page.
Error:
Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined
If you need the code of App.js and index.js
here they are:
App.js:
import React, { Component } from 'react';
import Header from './pages/Header';
import Footer from './pages/Footer';
import './css/App.css';
class App extends Component {
render() {
return (
<div className="App">
<Header />
{/*Content*/}
<div> App Page </div>
<Footer />
</div>
);
}
}
export default App;
index.js:
import { Router, Route, History } from 'react-router';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// CSS
import './css/index.css';
// Pages
import About from './pages/About';
import Register from './pages/Register';
import Cart from './pages/Cart';
import Thanks from './pages/Thanks';
import Faq from './pages/Faq';
import Contact from './pages/Contact';
import Error from './pages/Error';
ReactDOM.render((
<Router history={History}>
<Route path="/" component={App}>
<Route path="/pages/about" component={About}/>
<Route path="/pages/Register" component={Register}/>
<Route path="/pages/Cart" component={Cart}/>
<Route path="/pages/Thanks" component={Thanks}/>
<Route path="/pages/Error" component={Error}/>
<Route path="/pages/Faq" component={Faq}/>
<Route path="/pages/Contact" component={Contact}/>
</Route>
</Router>
), document.getElementById('root'))
According to your comment, your history object is undefined. Please try importing browserHistory instead of History and pass that into your router.
versions before React-Router v4 (Which I am assuming you are using since you are importing Router:
import { Router, Route, browserHistory } from 'react-router';
...
....
<Router history={browserHistory}>
<Route path="/" component={App}>
React-Router v4:
Instead of importing Router/browserHistory, you import browserRouter, which is a router that creates it's own history instance. it would look like this:
import { BrowserRouter, Route } from 'react-router';
...
...
<BrowserRouter>
<Route path="/" component={App}>
Related
When I try using the useLoaderData hook from react-router-dom, it has been giving me the same error
Uncaught Error: useLoaderData must be used within a data router. See
https://reactrouter.com/routers/picking-a-router.
no matter what change I make in the Home Component, so that made me guess the issue is not from there.
This is what my Main.jsx looks like:
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)
My App.jsx:
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home, { homeLoader } from './pages/Home'
import About from './pages/About'
import GlobalLayout from './GlobalLayout'
const App = () => {
return (
<>
<Routes>
<Route path='/' element={<GlobalLayout />}>
<Route index element={<Home />} loader={homeLoader} />
<Route path='/about' element={<About />} />
</Route>
</Routes>
</>
)
}
export default App
I think everything in my Home.jsx is fine
I have tried checking out the documentation attached to the error and its not helping.
In order to use the RRDv6.4 Data APIs a data router must be used. See Picking a Router.
Use the createBrowserRouter utility to create a Data router. The created router object is passed to the RouterProvider component. Any routes and components that you want or need to use the Data APIs necessarily need to be declared here at build time as part of the data router creation.
App.jsx
import React from 'react';
import {
createBrowserRouter,
createRoutesFromElements,
RouterProvider,
Route,
Routes
} from 'react-router-dom';
import Home, { homeLoader } from './pages/Home';
import About from './pages/About';
import GlobalLayout from './GlobalLayout';
const router = createBrowserRouter(
createRoutesFromElements(
<Route element={<GlobalLayout />}>
<Route path="/" element={<Home />} loader={homeLoader} />
<Route path="/about" element={<About />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
};
export default App;
Main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
createBrowserRouter
RouterProvider
createRoutesFromElements
This question already has an answer here:
React router routers not showing
(1 answer)
Closed 4 months ago.
Intro
I had created a react starter application
Problem
I had created a 3 components in /src/pages named AddCoupon, Addvertical, Addmetadata. Now then I created a file Routes.js in /src.
Routes.js
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import AddCoupon from './pages/addCoupon';
import AddMetadata from './pages/addMetadata';
import AddVertical from './pages/addVertical';
import Login from './pages/login';
const Routes = () => {
return (
<>
<Router>
<Switch>
<Route path="/addcoupon">
<AddCoupon />
</Route>
<Route path="/addmetadata">
<AddMetadata />
</Route>
<Route path='/addvertical'>
<AddVertical />
</Route>
<Route path="/">
<Login />
</Route>
</Switch>
</Router>
</>
)
}
export default Routes
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router >
<App />
</Router>
</React.StrictMode>
);
reportWebVitals();
What I want?
So basically what I want is that when I type http:localhost:3000/addcoupon, it should render AddCoupon Component and same for other 2 components but right now it's showing nothing.
I dont want to use any navbar. What I want is simply when I hit the endpoints mentioned in Route.js, it should render that component.
Router 6 uses different syntax compared to earlier versions. Please check out the documentation:
https://reactrouter.com/en/v6.3.0/getting-started/overview
For your particular case, you need to remove switch, and pass element to route, and wrap all Route elements in Routes element, like so:
const Routes = () => {
return (
<>
<Routes>
<Route path="/addcoupon" element={<AddCoupon />}/>
<Route path="/addmetadata" element={<AddMetadata />}/>
<Route path='/addvertical' element={<AddVertical />}/>
<Route path="/" element={<Login />}/>
</Routes>
</>
)
}
In order for routes to work, you also need to wrap App element in Router element, like below:
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import './styles/index.scss'
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
)
Final step, render Routes inside of App element or wherever you want to use it:
const App = () => {
return <Routes/>
}
i am getting the following errror:
Warning: Rendering directly is not supported and will be removed in a future major release. Did you mean to render <Context.Consumer> instead?
This is my app.js component:
import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import SignInSide from "./components/SignInSide";
import AboutUs from "./pages/AboutUs";
import ourservices from "./pages/OurServices";
import portfolio from "./pages/portfolio";
import SignUp from "./components/signup";
import booking from "./pages/book";
import PreviousBookings from "./pages/PreviousBookings";
import BookingContext from "./context/bookings/BookingContext";
function App() {
return (
<>
<BookingContext>
<Router>
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/ourservices" component={ourservices} />
<Route path="/developer" component={portfolio} />
<Route path="/login" component={SignInSide} />
<Route path="/signup" component={SignUp} />
<Route path="/booking" component={booking} />
<Route path="/booking-history" component={PreviousBookings} />
</Switch>
</Router>
</BookingContext>
</>
);
}
export default App;
I am trying to use the useContext hook.
Solution for me was changing:
import AuthProvider from "./context/AuthContext";
To:
import {AuthProvider} from "./context/AuthContext";
I'm new with React, might be because AuthProvider is not the default export
I had this error not too long ago. The issue was with my imports...so I was importing the context itself and rendering that, rather than the context provider function itself
in my opinion, you need a file Context Provider ;
example :
"./BookingProvider"
function BookingProvider()
return (
<BookingContext.Provider>
....
<BookingContext.Provider>
)
export default BookingProvide
"app.js"
<BookingProvide >
....
</BookingProvide>
I'm having issues with my project, actually i'm trying to handle a 404 page when the user enters different url outside of the Routes in my App, but using my knowledge of React and react-router only needs to put the last route has no path and exact path wrapped by a Switch from react-router but not work well, the home page is rendering the Home and the NotFound components at same time.
I've tried to remove Container component inside the Router but that makes that all of the components after MenuBar disappears.
I've tried to put path='*' in the last Route having 2 components rendered in the same page.
A picture of what i'm talking about:
2 components at same time
My project have 3 principal files:
1.- Index.js :
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import ApolloProvider from './ApolloProvider';
import 'semantic-ui-css/semantic.min.css';
import 'animate.css/animate.min.css';
import './App.css';
ReactDOM.render(ApolloProvider, document.getElementById('root'));
serviceWorker.unregister();
2.- ApolloProvider.js (using Apollo with GraphQL) :
import React from 'react';
import App from './App';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import { ApolloProvider } from '#apollo/react-hooks';
const httpLink = createHttpLink({
uri: 'http://localhost:5000/graphql'
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
});
export default (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
3.- And finally App.js :
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Container } from 'semantic-ui-react';
import MenuBar from './Components/MenuBar';
import Home from './Pages/Home';
import Login from './Pages/Login';
import Register from './Pages/Register';
import NotFound from './Pages/404';
const App = props => (
<Router>
<Switch>
<Container>
<MenuBar />
<Route exact path='/' component={Home} />
<Route exact path='/login' component={Login} />
<Route exact path='/register' component={Register} />
<Route path='*' component={NotFound} />
</Container>
</Switch>
</Router>
);
export default App;
I only need to render Home component when the user visits '/' but it's weird how react-router is rendering two components at same time, please le me know if you find where i'm wrong or a solution for that, i'll being posting updates if i find a solution or whatever.
Thanks in advance mates!.
Thanks to #skyboyer and #Hugo Dozois the issue was fixed, this is the updated App.js for future references:
const App = props => (
<Router>
<Container>
<MenuBar />
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/login' component={Login} />
<Route exact path='/register' component={Register} />
<Route path='*' component={NotFound} />
</Switch>
</Container>
</Router>
);
Best Regards!
Currently I am using BrowserHistory for my Routing in React which I need to run a nodejs server for it and I dont want to.
Are there any alternative from using BrowserHistory, I have heard of HashHistory, could anyone give me some example of hashHIstory and what is the difference between.
For me I dont care if the url looks ugly, I just dont wanna run a server only for routing.
My current code looks like this:
import React from "react";
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import Main from './components/main/main.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from './components/thirdview/thirdview.component';
import Traineeship from './components/traineeship/traineeships.component';
import InformationFilter from "./components/information/information-filter.component";
const AppRoutes = () => (
<BrowserRouter>
<Switch>
<Route exact path='/' component={Main}/>
<Route path='/secondview' component={SecondView}/>
<Route path='/traineeships' component={Traineeship}/>
<Route path='/information-filter' component={InformationFilter}/>
<Route path='/thirdview/:number?' component={ThirdView}/>
<Redirect from='*' to='/' />
</Switch>
</BrowserRouter>
);
export default AppRoutes;
you can use the Hash-bang mode, by utilising HashRouter
so, in your case, I think you just need to replace BrowserRouter with HashRouter
import React from "react";
import {HashRouter, Route, Switch, Redirect} from 'react-router-dom';
import Main from './components/main/main.component';
import SecondView from './components/secondview/secondview.component';
import ThirdView from './components/thirdview/thirdview.component';
import Traineeship from './components/traineeship/traineeships.component';
import InformationFilter from "./components/information/information-filter.component";
const AppRoutes = () => (
<HashRouter>
<Switch>
<Route exact path='/' component={Main}/>
<Route path='/secondview' component={SecondView}/>
<Route path='/traineeships' component={Traineeship}/>
<Route path='/information-filter' component={InformationFilter}/>
<Route path='/thirdview/:number?' component={ThirdView}/>
<Redirect from='*' to='/' />
</Switch>
</HashRouter>
);
export default AppRoutes;