All geek questions in one place

React Router Interaction

This is my first time using React and React Router, and I am facing some difficult communication problems. I created a simple SPA, and using React Router I can go to mysite.com/work, mysite.com/about and mysite.com/work/:projectid. I have no problem navigating to these pages if I start from the root of the site (for example, mysite.com and clicking "Work"). The problem I am facing is deep linking (manually enter mysite.com/about or refresh the page at mysite.com/about). All this works on my local host, but not on the hosted site (which, incidentally, is hosted on GitHub pages).

Is it because I use GitHub pages to host my site? Or is this a problem with the React Router?

Here is the main.js part:

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'));
+4
1

, react-router, js.

/about/index.html html . gh-pages , mysite.com/about html, , , 404.

webpack, https://github.com/markdalgleish/static-site-generator-webpack-plugin.

+4

Source: https://habr.com/ru/post/1622130/

More articles:


All Articles