Koa w/client side router

2
votes

Current situation:

frontend: React & React-Router

backend: Koa

app.use(mount('/graphql', graphqlHTTP({ schema: schema })));
app.use(mount('/api', api));
app.use(serve(__dirname + '../../public')); //serves static index.html

When I click on React Router's < Link > in the browser, every webpages shows. Whenever I refresh the page or manually enter a link. I get a 'not found' page. There is no server side rendering going here by the way. How do I let React-Router handle routes not specified above, i.e. only on the client?

2
javascriptreactjsreact-routerkoa

2 Answers

3
votes

The server has to respond with something when the page is refreshed; in this case, it needs to respond with index.html so that the client-side application can boot, and then React Router can mount the right component based on the URL.

So, server-side, you need to tell Koa to serve index.html for every URL that doesn't already match any of the other routes.

1
votes

Solution (based on the answer above)

import router from 'koa-router';
import sendfile from 'koa-sendfile';
//code to initialize router
//...

router.get('*', function* () {
    let stats = yield* sendfile.call(this, pathToIndexHtml));

     if (!this.status) this.throw(404)
})

Koa now serves index.html on every route that isn't specified. :)