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;
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
Hi! I try do to links in react and all time i got that errors as on screen minimum 8 sometimes i got 32 and I don't know how to fix
App.jsx
import { Layout } from "./Components/Layout";
import { Routes, Route, Link } from 'react-router-dom'
function App() {
return (
<>
<Routes>
<Route path="/" element={<Layout />} />
</Routes>
</>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Layout.jsx
import { Link, Outlet } from 'react-router-dom'
const Layout = () => {
return (
<>
<header>
<Link to="/">Home</Link>
<Link to="/posts">Blog</Link>
<Link to="/about">About</Link>
</header>
</>
)
}
export {Layout}
This code I making using tutorials from Youtube and official documentations but it don't work.
Please help. Thank
Routes need to be inside a tag or within a router created using createBrowserRouter.
In index.JS import BrowserRouter and replace React.StrictMode with it. Strict mode can cause things to render multiple times so I usually get rid of it.
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from “react-router-dom”;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
You should use all routing related actions under router context. You can achieve this by using BrowserRouter component as an HOC for <App />. You can find more here: https://reactrouter.com/en/main/router-components/browser-router
The Routes should have been wrapped by BrowserRouter component. It should look like this:
import { Layout } from "./Components/Layout";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App
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.
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!
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...