React Router deep linking
You can traverse the site from your root since the routing is all handled by react-router
which loaded from your root site's js files.
There is no html file located in /about/index.html
. gh-pages
hosts static sites, and if you go to mysite.com/about
without having the html file, it will probably give you a 404.
If you're using webpack, try using https://github.com/markdalgleish/static-site-generator-webpack-plugin.
user2909019
Updated on June 15, 2022Comments
-
user2909019 almost 2 years
This is my first time using React and React Router, and I am running into some deep linking issues. I've build a simple SPA, and with the help of React Router, I can navigate to mysite.com/work, mysite.com/about, and mysite.com/work/:projectid. I have no problem navigating to these pages if I start at the root of the site (mysite.com and clicking on 'Work', for example). The problem I am running into is deep linking (manually entering mysite.com/about or refreshing the page on mysite.com/about). This all works on my localhost but not on the hosted site (which, btw, is hosted on GitHub pages).
Is this because I am using GitHub pages to host my site? Or is this an issue with React Router?
Here is part of main.js:
var routes = ( <Router history={history}> <Route path="/" component={App}> <IndexRoute component={Work} /> <Route path="/work" component={Work} /> <Route path="/work/:id" component={ProjectDetail} /> <Route path="/about" component={About} /> </Route> <Route path="*" component={NotFound} /> </Router> ); ReactDOM.render(routes, document.getElementById('main'));
-
user2909019 over 8 yearsYes, that's exactly what is happening. Is there a version of this you'd recommend for Gulp?
-
oobgam over 8 yearsI'm sorry, I only know how to do it in
webpack
. You can try searching for it, the keywords that helped me before wereisomorphic
,react static site
,react render to server
-
oobgam over 8 yearsAnother option would be to host it in surge.sh and add a
200.html
file to catch other urls -
user2909019 over 8 yearsI think I'm going to do some refactoring and incorporate Webpack and use the generator you provided.