I added a No Match 404 error page to my website, and it works fine when I go to the wrong path on localhost, but after I deploy and go to an invalid path like .../invalidpath I get the default netlify page not found error. Below is my App.js component:
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation/Navigation';
import Home from './pages/home/Home';
import Projects from './pages/projects/Projects';
import Contact from './pages/contact/Contact';
import NoMatch from './pages/404page/404Page';
import './App.scss';
function App() {
return (
<div className='app'>
<Navigation />
<Switch>
<Route exact path='/' component={Home} />
<Route path='/projects' component={Projects} />
<Route path='/contact' component={Contact} />
<Route path='*' component={NoMatch} />
</Switch>
</div>
);
}
export default App;
If you've built the app with create-react-app and you're deploying to Netlify, you need to add a _redirects file inside the public directory of your project in order to support client side routing (React Router). It should have this inside:
/* /index.html 200
Details here.
Also, check the official docs from Netlify regarding for Redirects and rewrites
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 confused. Still learning Reactjs though and I am having this issue. I uploaded my react app to github pages. The only thing not working is the homepage on load. I mean, when I visit the site link, it doesn't display the homepage except I click the homepage link on the navigation bar.
However, while on my local machine, the home page works fine onload. No issues at all. I am still a novice and will appreciate any help rendered. Here is my code.
import Single from './pages/single/single'
import Home from './pages/home/home'
import TopBar from "./components/topbar/TopBar";
import Write from './pages/write/write'
import Settings from './pages/settings/settings'
import Login from './pages/login/login'
import Register from './pages/register/register'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
const user = false;
return (
<Router>
<TopBar/>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/register">
{ user? <Home/> : <Register />}
</Route>
<Route path="/login">
{user? <Home/> : <Login />}
</Route>
<Route path="/write">
{user? <Write /> : <Register/>}
</Route>
<Route path="/settings">
{user? <Settings />: <Register/>}
</Route>
<Route path="/post/:postId">
<Single />
</Route>
</Switch>
</Router>
);
}
export default App;
Is there anything that I am doing wrong here?
You can try to update your import HashRouter instead of BrowserRouter
import { HashRouter } from "react-router-dom";
Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in Here is the proper documentiotion to deploy SPA using at github pages Link
I deployed my react js site. but it can't load pages through url.
it can load homepage https://cekedu.netlify.app/ and when I click sign in it goes to the login page.
but I can't directly go to login page by entering url https://cekedu.netlify.app/login.
but it works in development.
import React from 'react'
import './css/typicons.min.css'
import ReactDOM from 'react-dom'
import User from './components/user'
import Header from './components/homeHeader'
import Home from './components/home'
import {Route, BrowserRouter as Router , Switch,Link} from 'react-router-dom'
import './index.css'
import './css/style.css'
import './css/bootstrap-grid.css'
class App extends React.Component{
render(){
return(
<Router>
<Switch>
<Route path="/login">
<User/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</Router>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'));
You need to make sure that all paths respond with your the index.html page that your React app is used in.
For netlify, create a file named "_redirects" in the public foler and add this.
/* /index.html 200
You can also try by using "exact" prop in Route of Home component.
<Route exact path="/">
<Home/>
</Route>
Add "exact" prop to Route which it's path is also included by another Route's path.
For example home path '/' is included in all paths so it needs to have exact keyword to differentiate it from other paths which start with '/*'.
<Router>
<Switch>
<Route path="/login">
<User/>
</Route>
<Route exact path="/">
<Home/>
</Route>
</Switch>
</Router>
I have a react project, it's working perfectly fine in a local server but when I try to upload it in a production server it shows white/blank screen without having any errors in the console.
What I did was run 'npm run build', then upload the files compiled on the build project on my production instance. I also modified the package.json and put "homepage":"http://50.31.112.112/new_vehicle_management"
What's wrong with what I did?
This is the code for Route
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import {Login} from './components/Login';
import {Menu} from './components/Menu';
import {NewProcess} from './components/NewProcess';
import {ContinueProcess} from './components/ContinueProcess';
import {SearchProcess} from './components/SearchProcess';
import {CreateProcess} from './components/CreateProcess';
import {ProcessActivity} from './components/ProcessActivity';
import {ProcessContinueActivity} from
'./components/ProcessContinueActivity';
import {ProceedProcess} from './components/ProceedProcess';
function App() {
return (
<div className="App">
<Router>
<Route path="/login" component={Login}/>
<Route path="/menu" component={Menu}/>
<Route path="/newprocess" component={NewProcess}/>
<Route path="/continueprocess" component={ContinueProcess}/>
<Route path="/searchprocess" component={SearchProcess}/>
<Route path="/createprocess" component={CreateProcess}/>
<Route path="/processactivity" component={ProcessActivity}/>
<Route path="/processcontinueactivity" component=
{ProcessContinueActivity}/>
<Route path="/proceedprocess" component={ProceedProcess}/>
</Router>
</div>
);
}
export default App;
You may need to add basename="/new_vehicle_management" to your router.
<Router basename="/new_vehicle_management" />
When you run in localhost, your routes are in the server root (i.e.: localhost/login) but since you hosted the website in a deeper level you need to specify the basename, otherwise the pathname will never match any route.
Also don't forget to set something in path /, otherwise your website will render nothing when the user visits it.
<Route path="/" component={YourLandingPageComponent}/>
Edit.: basename works in react-router v4, otherwise you may need to set the basename in each route.
See https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string for more details.
The route is working fine on local. However, it is not working after the build except the home route which is working but the two route it gives 404 not found result. The login and registration component its a plain form not connected to any API or server and the home component its just a return plain text info.
I'm new to react so I don't know an idea why not working on build but perfectly working on development.
I tried to run both on serve build localhost:5000 and upload to the server but not working also.
import React, { Component } from 'react';
import {
Route,
Switch,
BrowserRouter as Router
} from 'react-router-dom';
import LoginComponent from './component/login/login'
import RegisterComponent from './component/registration/register'
import Home from './component/dashboard/template/home'
const NoMatch = ({location}) =>(
<div>
<h3>No Match for {location.pathname}</h3>
</div>
)
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/login' component={LoginComponent} />
<Route path='/register' component={RegisterComponent} />
<Route component={NoMatch} />
</Switch>
</Router>
);
}
}
export default App;
This is most likely an issue to do with how your server is set up. When visit the page, /login, the server is looking for a file called /login in the root. You need to configure a single entry-point to the server at index.html
In Apache this would be configured in .htaaccess or in nginx you can use a rewrite