React-router app on Netlify returning blank index/home page

Question

Having trouble deploying a react-router application to Netlify. Route path '/' returns empty but if I manually type the other paths, they work fine. Would appreciate any help here.

This is what my app.js looks like:

import './App.scss';
import { Routes, Route, Outlet } from 'react-router-dom';

// PERSISTENT LAYOUT
const PersistentLayout = () => {
  return (
    <>
      <Logo />
      <StarHead />
      <Outlet />
    </>
  );
};

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<PersistentLayout />}>
          <Route index element={<Home />} />
          <Route path="/add-token" element={<AddToken />} />
          <Route path="/edit-token/:id" element={<EditToken />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

// PROVIDERS
import { GlobalProvider } from './context/GlobalState';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <GlobalProvider>
      <App />
    </GlobalProvider>
  </BrowserRouter>
)

Does the code work correctly as expected when running locally? The index/home page is rendered on path `"/"`, not `"./"`. Try `"/"` instead. — Drew Reese, Aug 22 '22 at 05:56
It works absolutely fine locally, so it's definitely something I'm missing when setting up the project so Netlify plays nice with react-router. — sampconrad, Aug 22 '22 at 08:13
I see. Then please check the [CRA deployment docs](https://create-react-app.dev/docs/deployment/#netlify) specific to Netlify and see what configuration changes need to be made to ensure proper routing. — Drew Reese, Aug 22 '22 at 16:22

score 0 · Answer 1 · answered Aug 22 '22 at 07:26

0

Try putting the BrowserRouter in the App.js file itself above <Routes> like below,

import './App.scss';
import { Routes, Route, Outlet, BrowserRouter } from 'react-router-dom';

// PERSISTENT LAYOUT
const PersistentLayout = () => {
  return (
    <>
      <Logo />
      <StarHead />
      <Outlet />
    </>
  );
};

function App() {
  return (
    <div className="App">
     <BrowserRouter>
      <Routes>
        <Route path="/" element={<PersistentLayout />}>
          <Route index element={<Home />} />
          <Route path="/add-token" element={<AddToken />} />
          <Route path="/edit-token/:id" element={<EditToken />} />
        </Route>
      </Routes>
     </BrowserRouter>
    </div>
  );
}

export default App;

answered Aug 22 '22 at 07:26

Sujith Sandeep

1,185
6
20

Same results, unfortunately. – sampconrad Aug 22 '22 at 08:14
@sampconrad I think, You din't import the components in your `App.js` file. So import like -> `import Home from './components/Home`. And then use it in `App.js` file. – Sujith Sandeep Aug 22 '22 at 09:47
I did. I just cleaned up the code snipped for readability. Like I said elsewhere, it works fine locally, so it's definitely not an issue with importing the home page component. – sampconrad Aug 22 '22 at 10:13

score 0 · Answer 2 · answered Aug 22 '22 at 07:35

here in the child route no need to add / pls try this one.

import { Routes, Route, Outlet, BrowserRouter } from "react-router-dom";

// PERSISTENT LAYOUT
const PersistentLayout = () => {
  return (
    <>
      <h1>Header</h1>
      <Outlet />
    </>
  );
};

const Home = () => <h1>home</h1>;
const AddToken = () => <h1>AddToken</h1>;
const EditToken = () => <h1>EditToken</h1>;

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<PersistentLayout />}>
            <Route index element={<Home />} />
            <Route path="add-token" element={<AddToken />} />
            <Route path="edit-token/:id" element={<EditToken />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Same results, unfortunately. – sampconrad Aug 22 '22 at 08:14 — sampconrad, Aug 22 '22 at 08:14

score 0 · Answer 3 · answered Aug 22 '22 at 10:21

0

Has to do with Netlify. Just add a _redirects file (no extension) to your deploy folder

And add the following text to it:

/* /index.html 200

Source

answered Aug 22 '22 at 10:21

Jonatan Kruszewski

1,027
3
23

Already tried it. No luck. – sampconrad Aug 22 '22 at 11:30
I think that it is related to Netlify settings. Did you try giving a look to the docs if it mentions something? – Jonatan Kruszewski Aug 22 '22 at 14:57
1

I managed to pinpoint the problem. It's from a context file where I was trying to implement local storage to save the state. Removed the potion of the code that set the local storage and it's working fine. So now I just have to look into how to get Local Storage working properly. – sampconrad Aug 22 '22 at 15:13

React-router app on Netlify returning blank index/home page

3 Answers3