Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Enable Routing in React static web app after deployment

I have a static web app (React/Typescript) with the following routes/pages:

index.ts

ReactDOM.render(
  <ThemeProvider>
    <React.StrictMode>
      <Provider store={store}>
        <BrowserRouter>
          <Routes>
            <Route path="" element={<App />}>
              <Route path="/" element={<JobsPage />} />
              <Route path="/JobDetails" element={<JobDetails />} />
              <Route path="/OwnerPage" element={<OwnerPage />} />
              <Route path="/AdminConfig" element={<AdminConfig />} />
              <Route path="/ManageMembership" element={<ManageMembership />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </Provider>
    </React.StrictMode>
  </ThemeProvider>,
  document.getElementById('root')
);

On running locally, I can go to these pages directly. For example, "localhost:3000/ManageMembership" takes me to ManageMembership page. After deployment, "abc.com/ManageMembership" is showing "Not Found". It’s not redirecting to ManageMembership page. But, if I click a button, I see the URL set to abc.com/ManageMembership. If I try to access this URL, it shows "Not Found". What am I missing and how do I fix this?

Tags:

2

Answers


  1. 0

    I created a sample React.js application, deployed it to Azure Static Web Apps, and successfully redirected to the specific route.

    • To fix the page not founderror , I’ve added a staticwebapp.config.json file in the root directory of the project.
    • It works fine locally, but in production, a staticwebapp.config.json file is required to handle routes.
    • It allows you to configure routing, authentication, and authorization for your apps on Azure.

    Please add the below staticwebapp.config.json file in your project directory.

    {
"routes": [
{
"route": "/api/*",
"allowedRoles": ["anonymous", "authenticated"]
},
{
"route": "/",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/JobsPage",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/ManageMembership",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/JobDetails",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/OwnerPage",
"serve": "/index.html",
"statusCode": 200
},
{
"route": "/AdminConfig",
"serve": "/index.html",
"statusCode": 200
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/api/*"]
}
}

    My index.tsx:

    import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import JobsPage from './pages/JobsPage';
import ManageMembership from './pages/ManageMembership';
import JobDetails from './pages/JobDetails';
import OwnerPage from './pages/OwnerPage';
import AdminConfig from './pages/AdminConfig';

ReactDOM.render(
  <BrowserRouter>
    <Routes>   
      <Route path="/" element={<App />}>
        <Route path="JobsPage" element={<JobsPage />} />
        <Route path="ManageMembership" element={<ManageMembership />} />
        <Route path="JobDetails" element={<JobDetails />} />
        <Route path="OwnerPage" element={<OwnerPage />} />
        <Route path="AdminConfig" element={<AdminConfig />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

    I’ve successfully deployed the application to Azure static web app via Github actions.
    enter image description here

    Local output:
    enter image description here

    Output after deployment:
    enter image description here

    Login or Signup to reply.
  2. 0

    In App.js

    import React from 'react';
import { Routes, Route} from 'react-router-dom';
import MainPage from './components/MainPage/MainPage';
import LoginPage from './components/LoginPage/LoginPage';
import RegisterPage from './components/RegisterPage/RegisterPage';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import DetailsPage from './components/DetailsPage/DetailsPage';
import SearchPage from './components/SearchPage/SearchPage';
import Profile from './components/Profile/Profile';

function App() {
  return (
        <>
        <Navbar/>
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/app" element={<MainPage />} />
          <Route path="/app/login" element={<LoginPage/>} />
          <Route path="/app/register" element={<RegisterPage />} />
          <Route path="/app/product/:productId" element={<DetailsPage/>} />
          <Route path="/app/search" element={<SearchPage/>} />
          <Route path="/app/profile" element={<Profile/>} />
        </Routes>
        </>
  );
}
export default App;

    This is simple sample. I use this code, display in localhost:3000. I think importing route is very important , you listen and do like this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search