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

Static react app can't navigate or refresh other than / url – Reactjs

I created my react app with create-react-app and I built it with the yarn build. Then I am using Express js server to render the static react app. My react app is using react router. When I try navigate to the url, it gives me 404. Also refresh gives me the same result. It makes sense the build react app does not have the "paths", i.e. there is no "hello" folder for "/hello". How do I resolve this?

This is how I serve the static react app in Express js. app.use(express.static('public'));
`

Tags:

2

Answers


  1. 0

    React Router DOM

    React handles its own routing system react-router-dom you won’t need express.

    And checkout newest documentation if you’re using latest package version.
    documentation

    In your terminal, use npm to install the package:

    npm install react-router-dom

    or yarn

    yarn add react-router-dom

    This sample code is just to get a sketch idea about the react-router-dom. Please read the latest documentation

    react-router-dom version 5.x.x

    import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="wrapper">
      <h1>APP.JS</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/page1">
            <page1 />
          </Route>
          <Route path="/page2">
            <page2 />
          </Route>
          <Route path="/page3">
            <page3 />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;
    Login or Signup to reply.
  2. 0

    you need to use this

    React Router Dom

    you can also check my personal wireframe it is still under process but you get the idea

    REPO
    Live Link

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

Back To Top
Search