i'm trying to load a new page on my react app, the address change correctly on the search bar but the page is not loading.
here my code:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import Menu from "./components/Pages/Menu/index";
import { BrowserRouter, Route, Switch } from "react-router-dom";
const rootElement = document.getElementById("root");
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/Menu" component={Menu} />
</Switch>
</BrowserRouter>,
rootElement
);
Are you sure you change the page correctly?
One of many methods:
<button onClick={() => window.location.replace("/Second")}>Change to Second page</button>
Should work for you.
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'm having trouble with this simple react routing. The problem is that after I click on "Go to invoices" or "Go to eshop", the URL changes, but the page content remains the same. It only changes if I am at localhost:1234/eshop (or /dashboard) and reload the page.
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default function App() {
return (
<Router>
<h1>Default layout</h1>
<Link to="/invoices">Go to invoices</Link>
<Link to="/eshop">Go to eshop</Link>
<Route path="/invoices">
<h2>Invoices page</h2>
</Route>
<Route path="/eshop">
<h2>eshop page</h2>
</Route>
</Router>
);
}
Any ideas how to fix this?
edit
sandbox here https://codesandbox.io/s/hungry-cloud-i2hui2?file=/src/App.js
It's a clash between React Router and StrictMode.
One possible solution is to place the Router outside of StricMode, in the index.js file itself:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<Router>
<StrictMode>
<App />
</StrictMode>
</Router>
);
See: here and here
You should wrap your Route components with a Switch component.
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
export default function App() {
return (
<Router>
<h1>Default layout</h1>
<Link to="/invoices">Go to invoices</Link>
<Link to="/eshop">Go to eshop</Link>
<Switch>
<Route path="/invoices">
<h2>Invoices page</h2>
</Route>
<Route path="/eshop">
<h2>eshop page</h2>
</Route>
</Switch>
</Router>
)
}
https://v5.reactrouter.com/web/guides/quick-start
So i made a portfolio site in React that works fine until you click on one of my github links and then try to go back to the portfolio page.
When going back or type a specifict path in URL you will get a GH-pages 404 file not found page.
Im a real beginner when it comes to React and i dont know how to fix this.
Im guessing its something with the BrowserRouter but i dont know.
Here's my Index.js file:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
</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:
reportWebVitals();
and here's my app.js file:
import React from "react";
import AboutSection from "./components/AboutSection";
//Global Style
import GlobalStyle from "./components/GlobalStyle";
// Import Pages
import AboutMe from "./pages/AboutMe";
import ContactMe from "./pages/ContactMe";
import MyWork from "./pages/MyWork";
import Nav from "./components/Nav";
import WorkDetail from "./pages/WorkDetail";
//Router
import { Switch, Route, useLocation } from "react-router-dom";
//Animation
import { AnimatePresence } from "framer-motion";
import ScrollTop from "../src/components/ScrollTop";
function App() {
const location = useLocation();
return (
<div className="App">
<GlobalStyle />
<Nav />
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.pathname}>
<Route path="/" exact component={AboutMe}>
<AboutMe />
</Route>
<Route path="/work" exact>
<MyWork />
</Route>
<Route path="/work/:id">
<WorkDetail />
</Route>
<Route path="/contact">
<ContactMe />
</Route>
</Switch>
<ScrollTop />
</AnimatePresence>
</div>
);
}
export default App;
I am working on a simple React/Redux/Rails project and I am having an issue loading the form. I have a Router set up which holds the routes on my App.js page
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import '../App.css';
import Navbar from '../components/Navbar'
import Home from '../components/Home'
import Games from './Games'
import GamesShow from './GamesShow';
import GameForm from './GameForm';
class App extends Component {
render() {
return (
<Router>
<div>
<Navbar />
<Switch>
<Route exact path = '/' component={Home} />
<Route exact path = '/games' component={Games} />
<Route exact path = '/games/:id' component={GamesShow} />
<Route exact path = '/games/new' component={GameForm} />
</Switch>
</div>
</Router>
);
}
}
export default App;
There is a link on another page that goes to /games/new.
<Link to="/games/new" exact>Add a new Game</Link>
The page loads under the url, but the page is black except for the Navbar component. I should mention that I am not even trying to load a form yet, just some sample text. I am importing everything so I know my importing/exporting is not the problem.
import React, { Component } from 'react';
class GameForm extends Component {
render() {
return(
<div>
Add a new game to the List
<form onSubmit={this.handleOnSubmit}>
<div>
<label htmlFor="name">Name:</label>
</div>
</form>
</div>
)
}
}
export default GameForm
Things get weird when I remove new from /games/new and comment out the original games route, it will then load the GameForm Component under the url games, but then I add /new back, it stops working. Now I think that covers everything, but here is my index.js just in case.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
serviceWorker.unregister();
You need to move '/games/new' above '/games/:id'
Like so:
<Switch>
<Route exact path = '/' component={Home} />
<Route exact path = '/games' component={Games} />
<Route exact path = '/games/new' component={GameForm} />
<Route exact path = '/games/:id' component={GamesShow} />
</Switch>
It needs to come before the dynamic path...