preface

React Routing modes are classified into two types:

hashHistory:

Such as http://localhost:8080/#/login

browserHistory

Such as http://localhost:8080/login

BrowserHistory has more advantages than hashHistory, but the trouble is that browserHistory routing requires server configuration:

Request resources on http://localhost:8080/login, the server will be the default search the current directory login folder resources. However, the logIn directory does not exist, and is usually refreshed when the browser ==404Not fund==;

Use try_files in nginx to specify a fall back resource.

Configure the React router

import React from 'react'; import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'; import App from '@pages/App'; function About(props) { console.log('about', props); return <div>page: about</div>; } // Route configuration const routerConfig = [{path: '/', Component: App}, {path: '/about', Component: about}]; Function AppRouter() {return (// Only if your application is deployed to the secondary directory of the server, Basename <Router basename="/ React "> <Switch> {routerConfig.map(n => {return <Route path={n.path} exact) component={n.component}></Route>; })} </Switch> </Router> ); } export default AppRouter;Copy the code

/react basename = /react basename = /react basename = /react You do not need to set this if your static resource is already in the root directory.

Start local service:

Click on about from the home page to see the path of this routing mode;

If you refresh your browser at this point, you will be prompted to find the about directory:

In webpack.config.js you can add:

devServer {
	historyApiFallback: true
}
Copy the code

For historyApiFallback in webpack, use connect-history-api-fallback:

Restart the local service and check whether the service is normal again.

About the connect – history – API – fallback

A single page application (SPA) usually has only one index.html, and the navigation is based on the HTML5 History API. When the user accesses the address directly from the index.html page or reobtains it from the browser’s refresh button, the 404 problem will occur.

For example, go directly to /login, /login/online, bypassing index.html, and look for files at that address. Since this is a single-page application, the end result is definitely a lookup failure, returning a 404 error.

This middleware is designed to solve this problem;

The middleware will change the address of the request to the default index.html if one of the following four conditions is met:

1 GET request

2 Accept the content in text/ HTML format

3 is not a direct file request, such as not in the path.

4 There is no regular match in options.rewrites

2, Nginx configuration

location /react {
    alias /project/react/;
    # browserHistory mode 404 problem
    try_files $uri $uri/ /react/index.html;
    index index.html;
    autoindex on;
    gzip on;
    add_header Access-Control-Allow-Origin The '*';
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, OPTIONS';
    add_header Access-Control-Expose-Headers 'Accept-Ranges, Content-Encoding, Content-Length, Content-Range';
  }
Copy the code

autoindex on; Turn this on and typing /react will direct you to index.html;

/react/index.html; /react/index.html; /react/index.html; /react/index.html; /react/index.html;

try_files $uri $uri/ /react/index.html;
Copy the code

Browser type http://**:6002/react/about

It looks for http://**:6002/react/about to see if the file absent.html exists. /react/index.html; /react/index.html;

If try_files and autoindex exist at the same time, /react will not automatically redirect to index.html ==;

Reference documentation

  1. connect-history-api-fallback

  2. nginx ~ try_files