CODEWITHSUNDEEP
reactjsgithub
Viet
Viet

Reputation: 6953

react router switch route doesn't work gh-pages on github.io

I've been having problems with deploying my react app on github.io

I always have my 404 page loaded whenever I start the link: myname.github.io/myapp

Then if I click on /saved, it redirects to the right 'saved' page but if I click on any 'topic' page, it loads the 404 page again with the url: myname.github.io

I've added: gh-pages, added scripts and run npm run deploy following this instruction.

I've also added path={process.env.PUBLIC_URL + '/'} but nothing works.

Here's my app.js:

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Saved from './pages/Saved';
import Topic from './pages/Topic';
import Result from './pages/Result';
import NoMatch from './pages/NoMatch';
import NavBar from './components/NavBar';
import './App.css';

const App = () =>
    <Router>
        <div>
        <NavBar />
        <Switch>
            <Route exact path={process.env.PUBLIC_URL + '/'} component={Home} />
            <Route exact path={process.env.PUBLIC_URL + '/saved'} component={Saved} />
            <Route exact path={process.env.PUBLIC_URL + '/topic'} component={Topic} />
            <Route exact path={process.env.PUBLIC_URL + '/result'} component={Result} />
            <Route component={NoMatch} />
        </Switch>
        </div>
    </Router>;

export default App;

Update 6 Apr 2018

Adding project name to PUBLIC_URL solves the problem of 404 Homepage.

App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/'} component={Home} />

However, all other links lead to 404 page. I've tried:

App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/saved'} component={Saved} />

or

<Route exact path={process.env.PUBLIC_URL + '/saved'} component={Saved} />

or

<Route exact path='/saved' component={Saved} />

On other pages:

<Link to={process.env.PUBLIC_URL + '/g4g-debate/saved/'}>User Profile</Link>

or

<Link to={process.env.PUBLIC_URL + '/saved'}>User Profile</Link>

or

<Link to='/saved'>User Profile</Link>

You can take a look at it here: https://vnndi.github.io/g4g-debate/

Upvotes: 0

Views: 865

Answers (2)

tpyle
tpyle

Reputation: 67

I know this is an old question and you said you abandoned it, but these for those who are curious:

react-router-dom supports setting a basename on the router object:

<BrowserRouter basename={'/g4g-debate'}>
  <Stuff />
</BrowserRouter>

This will automatically set all <Link />'s and <Route />'s to use the basepath at the start of the path, and then you no longer need to include process.env.PUBLIC_URL manually.

As far as the 404 error you were getting, that might also be due to the settings on the github page. I can't speak to github specifically, but a lot of hosting services have a way to set an 'error' page, which is what it will server when the path doesn't correspond to something that doesn't exist. In a one page app with only virtual paths, you need to set the error page to your root index.html file, so that it will server the page and then react-router will handle the actual route.

Upvotes: 0

nbkhope
nbkhope

Reputation: 7474

You shouldn't need to use process.env.PUBLIC_URL to prefix each route path. The route paths should be relative. I would suggest you remove that.

You did not specify what the value of process.env.PUBLIC_URL is in your question, but I can guess it is myname.github.io?

In any case, the problem you have is because the app is at https://vnndi.github.io/g4g-debate/, but when you click the User Profile link, it goes to https://vnndi.github.io/saved. That route does not match. It should be the following:

https://vnndi.github.io/g4g-debate/saved

So to fix the problem remove the process.env.PUBLIC_URL prefix and just use:

<Route exact path="/saved" component={Saved} />

Upvotes: 1

Related Questions