I know several questions have been asked relating to this, but none capture what I am experiencing so here it goes...
My app loads fine and my landing page is rendering as expected. The weird piece is that none of the other routes are loading. I have a react-router-dom Link on the Landing component that directs to school but nothing happens, no console errors, just the Landing component still rendering. When I manually type any other route in the browser, still nothing happens, just the Landing pages rendering.
It doesn't matter what component is set to the / route, it renders fine but something is definitely up with the react-router-dom.
Here's my index.js
import { render } from 'react-dom';
import App from './components/app/App';
import './index.scss';
render(
<App />,
document.getElementById('root'),
);
App.js
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Content from '/components/Content';
import Nav from '../nav/Nav';
import Home from '../../pages/home/Home';
import PageFooter from '../footer/PageFooter';
import Search from '../../pages/search/Search';
import Course from '../../pages/course/Course';
import Landing from '../../pages/landing/Landing';
export default function App() {
return (
<div className="App">
<BrowserRouter>
<Nav />
<Content className="main-wrapper" fullWidth>
<Routes>
<Route path="/" element={<Landing />} />
<Route path="school" element={<Home />} />
<Route path="search" element={<Search />} />
<Route path="courses">
<Route path=":courseId" element={<Course />} />
<Route
index
element={<Navigate replace to="/" />}
/>
</Route>
</Routes>
</Content>
<PageFooter />
</BrowserRouter>
</div>
);
}
I am absolutely beside myself - what am I doing wrong?
As it usually goes, this was my error. After ripping it all out, starting with a fresh CRA app, and piecing my project back together, I found that in the <Nav /> component I had an inappropriate math operator (= instead of ===) going on within a useLocation reference 🤦🏽
Related
Trying to deploy my first React application. The index route is visible but none of the relative endpoints work and I get a 404 from the render server. However I read that I needed to make these changes to the deployment in order for the client-side routing to work properly:
Render's suggestion for configuring client-side routing to work properly
However, when I visit an endpoint like "/login" or "/signup", the react router in my app catches it as a 404 and
renders the 404 page, and the endpoint in the url changes to /index.html
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import Views from "./App";
import { BrowserRouter } from "react-router-dom";
import { UserProvider } from "./context/userContext.js";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<UserProvider>
<BrowserRouter>
<Views />
</BrowserRouter>
</UserProvider>
</React.StrictMode>
);
App.js
import { Routes, Route } from "react-router-dom";
import PublicRoutes from "./routes/PublicRoutes";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useUser } from "./context/userContext.js";
function Views() {
const { loading } = useUser();
if (loading) return <h1>Loading...</h1>;
return (
<div className="App">
<Routes>
<Route path="*" element={<PublicRoutes />} />
</Routes>
<ToastContainer />
</div>
);
}
export default Views;
Routing Logic:
const PublicRoutes = () => {
return (
<QueryClientProvider client={new QueryClient()}>
<Routes>
<Route index element={<Landing />} />
<Route path="login" element={<Login />} />
<Route path="signup" element={<SignUpMUI />} />
<Route element={<Protect />}>
<Route path="dashboard" element={<Dashboard/>} />
<Route path="event/:id" element={<EventPage />} />
<Route path="profile" element={<>Profile Page</>} />
<Route path="settings" element={<>Settings</>} />
</Route>
<Route path="*" element={<h1>404</h1>} />
</Routes>
</QueryClientProvider>
);
};
export default PublicRoutes;
I thought maybe it has something to do with the file pathing because my repository contains a sub-folder for the API and then a sub-folder for the react application so maybe I thought I had to route the html pathing as /client/index.html or something but that didn't work. Honestly I have no idea what I am supposed to do, I have very little experience with deploying and with most resources and tutorials covering how to deploy with Heroku (which has recently deprecated their free tier) and most tutorials covering React deployment on Render don't involve any usage of the react router.
Also, I would like to reiterate the structure of the repository as it contains two sub folders, one which contains the react application called "client" and another which contains the server code called "server". Here is an image
I'm thinking maybe this has something to do with the redirections to the index.html but Idk, I've already tried messing about with the configuration on render to see if it would make a difference but no dice.
Just read: https://render.com/docs/deploy-create-react-app
and add this to Redirects/Rewrites section
enter image description here
I am trying to make a website by watching tutorial in Udemy.
The instructor added Route in one of the file, and I did the same, but my webpage becomes blank after adding it.
I also tried including Routes but that didn't help.
Here's my code:
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HomeScreen from './screens/HomeScreen';
function App() {
return (
<Router>
<Header />
<main classname="py-3">
<Container>
<Routes>
<Route path="/" element={<HomeScreen />} />
</Routes>
</Container>
</main>
</Footer />
</Router>
);
}
export default App;
enter image description here
It looks like you may be using react-router-dom#6. The Routes component API changed significantly from v5 to v6, it no longer takes a component, or render or children function props, all replaced by a single element prop taking a ReactNode, a.k.a. JSX. Note that in RRDv6 that all routes are now always exactly matched, so there is also no longer any exact prop.
Example:
<Router>
<Header />
<main classname="py-3">
<Container>
<Routes>
<Route path="/" element={<HomeScreen />} />
</Routes>
</Container>
</main>
</Footer />
</Router>
I am trying to render an ultra-simple webpage using react-routing-dom lib. Here is my app.js
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<Route exact path='/' element={<About />} />
<Route exact path='/shop' element={<Shop />} />
</Router>
</>
);
}
export default App;
using this, I run npm start and expect that the <Nav /> and <About /> components render at http://localhost:3000. Instead, the screen is completely blank. There are no warnings, errors, etc.; it's a clean build. Not even the <Nav /> component that is outside the entire Router block is rendered!
The plot thickens: when I build and run the following, all three components render.
import React from 'react';
import Nav from './nav.js';
import Shop from './shop.js';
import About from './about.js';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
function App() {
return (
<>
<Nav />
<Router>
<About />
<Shop />
</Router>
</>
);
}
export default App;
From this, I think its safe to assume that <Route /> is the problem.
react-router-dom seems to change a lot in a relatively short amount of time, so there is a lot of outdated info. If someone could point me in the right direction, I would be very grateful indeed.
Only thing I see missing is the Routes component wrapping the Route components. You imported Routes but don't appear to have used it. All Route components must be rendered into a Routes component (or another Route if nesting). Without the Routes you should be seeing the error A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
<Router>
<Routes>
<Route exact path="/" element={<About />} />
<Route exact path="/shop" element={<Shop />} />
</Routes>
</Router>
Check if you have installed react-router-dom version 6. for version 6 you must wrap up all 'Route' inside a "Routes".
In one of my modules I use this code without any issue:
import { Link } from "react-router-dom";
<Link to="/HowItWorks">
Continue
</Link>
But in another module I use similar code but get the invarient failed message
import { Link } from "react-router-dom";
<Link to="/TheBook">Continue</Link>
The only difference is that the first module is in the src/components directory while the failing module is in the src directory.
In App.js (which is also in src directory) the router code includes several modules including both of the ones above:
import {
Switch,
BrowserRouter as Router,
Route,
Redirect,
} from 'react-router-dom';
import Nav from './Nav';
import Introduction from './components/Introduction.js';
import HowItWorks from './components/HowItWorks.js';
import Blog from './components/Blog.js';
import Shop from './components/Shop.js';
import TheBook from './components/TheBook.js';
import Footer from './Footer.js';
function App() {
return (
<>
<div className="App">
<Router>
<Nav />
<Switch>
<Route path="/Introduction" exact component={Introduction}></Route>
<Route path='/HowItWorks' exact component={HowItWorks}></Route>
<Route path="/Shop" exact component={Shop}></Route>
<Route path="/Blog" exact component={Blog}></Route>
<Route path="/TheBook" exact component={TheBook}></Route>
</Switch>
</Router>
<Footer />
</div>
</>
);
}
export default App;
If I click the link for "TheBook" in the navbar it works fine... Any idea why is this happening ?
Ok, the problem was, as I expected, not in the footer.js code but in the App.js code. The footer.js code needed to be moved inside the Router:
function App() {
return (
<>
<div className="App">
<Router>
<Footer /> {/* The footer must be inside the router for the <link> to work */}
<Nav />
<Switch>
<Route path="/Introduction" exact component={Introduction}></Route>
<Route path='/HowItWorks' exact component={HowItWorks}></Route>
<Route path="/Shop" exact component={Shop}></Route>
<Route path="/Blog" exact component={Blog}></Route>
<Route path="/TheBook" exact component={TheBook}></Route>
</Switch>
</Router>
</div>
</>
);
}
This is now working properly.
I'm building a new chrome extension using ReactJS, and I'm trying to redirect on '/' (default) to an existing route using the component of react-router.
For some reason, I can see it when I compile it to localhost, but when I upload it as a chrome extension I can't see it anymore.
What I thought about is that maybe there is another route that is in use as the main route in chrome extension instead of '/'.
I tried to console.log it but for some reason, it is not showing me the logs.
Thanks!
<div className="App">
<BrowserRouter>
<Navbar />
<Route
path="/"
exact
render={() => <Redirect to="/navigatehere" /> }
/>
<Route
path="/navigatehere"
exact
render={() => <NavigateHere />}
/>
</BrowserRouter>
</div>
);
}
export default App;
First Of all you need Switch to use exact prop.
You can import it like this.
import {BrowserRouter, Switch, Route}
// Then you have to use
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact /*render Whatever you want after this . . .*/ />
</Switch>
</div>
</BrowserRouter>
Second of all, I use component prop instead of render().
Like this -
import DummyComponent from './DummyFolder/DummyComponent;
import React from 'react'
import {BrowserRouter as Router, Switch, Route}
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact component={DummyComponent}/> // This will render the component in the respective path
</Switch>
</div>
</BrowserRouter>
However render() should also work for you if you use <Switch>. It is working without Switch for rest of the router because you are not specfing path as '/' for all the <Route />. If you want to route to '/', then Switch is compulsory. You can also refer DevEd 's YouTube channel for more understanding. He has made an exclusive video on React Router. Check that out Here ◀ ◀ ◀.