使用Express服务反应路线

Question

I'm using react-router-dom and load components on rotes like this:

    <Switch>
        <Route exact path="/home" component={Home} />
        <Route path="/services" component={Services} />
        ...and so on...
        <Route component={PageNotFound} />
    </Switch>

I build this project with webpack and have only 1 single file bundle.js. and use It as static files in my server.js

import express from 'express'
const app = express()
app.use('/', express.static('./public'))
app.listen(3000)

Eveything works fine until I start trying to do something on some of my routes:

app.get('/services', () => {
  console.log('services')
})

When I'm on route '/services' it doesn't log 'services' in console.

Answer 1

You need to understand the difference between the browser rendering the route and Express rendering a path. They are two completely different things. When you refresh the browser, Express does not know how to handle "/services", therefore you get an error. When you type "/api/services" then express does know how to handle the path. When React/React-Router is fully loaded into the browser, it does not request "/services" from the Express server, the browser already knows about the router, and renders the HTML.

You need a wildcard route match "*" that will render the default/index.html file. This will allow your browser to locate the "/services" page. This is complicated but basically, your browser calls "/services", this hits express, who tries to find a path match. If you have a wild card that points to your index.html page, then this is returned to the browser. The Browser then looks at the route "/services" and passed this to React Router, who then load the services components. You are always returning the same HTML (index/default), it's the browser that does the magic of showing the right page. this is why it's important to have different paths/routes (Path: "/api/services", route: "/services".

If you didn't then a user refreshing the page on the "/services" route would hit express and get the "/services" path.

Path: An Express pattern match for the URL to a block of code "/api/services"

route: A ReactRouter URL for rendering a given Component

Answer 2

Make sure your backend route is different otherwise this gets confusing.

app.get('/api/services', () => {
  console.log('services')
})

This way we know that:

/services = Your React-router component

/api/services = an API call to the backend