How to create _redirects file for React JS app to deploy it on Netlify [duplicate]

Question

I would like some help on how to create the _redirects file in order to other pages of my website work. It's using react-router. Could you please show me one example of how should I do it. The urls uses params and querys.

<Router basename = {process.env.PUBLIC_URL}>
      
      <Switch>
          <Route exact path = "/">
          <Root/>
          </Route>
          <Route exact path = {"/Pesquisar/:searchField/:page"} component = {withRouter(Pesquisa)}>
          </Route>
          <Route exact path = {"/documento/:id"} component = {Documento}>
          </Route>
          <Route exact insecure component={ Insecure }/>

      </Switch>
    </Router>
    );
}

this is the App.js file, which is using the react-router. What should the _redirects look like?

Right now, when deployed it only works the front page. kind-heisenberg-3e0b7e.netlify.app. I guess , I should use _redirects in order to make it work with react-router. You can see by clicking on the left menu item. — Icaro Amorim
– Icaro Amorim, Commented Jul 22, 2021 at 12:05

HelloWorldEngineer · Accepted Answer · 2021-07-22 12:30:01Z

2

You can use HashRouter instead of BrowserRouter, so you don't need those redirect files. Indeed, your React app navigation will work on Netlify if your url contains a #.

So just write:

import { HashRouter, Switch, Route, Redirect } from "react-router-dom";

function App(){
  return (
    <HashRouter>
      <Switch>
          <Route exact path="/"/>
          <Route path="/Pesquisar/:searchField/:page" component={withRouter(Pesquisa)} />
          <Route path="/documento/:id" component={Documento}/>
          <Route insecure component={Insecure}/>

      </Switch>
    </HashRouter>
    );
  )
}

answered Jul 22, 2021 at 12:30

HelloWorldEngineer

6,42718 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create _redirects file for React JS app to deploy it on Netlify [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related