javascript - react : clicked link versus direct link

Question

这可能非常简单，甚至简单化，但是...我有一个使用 create-react-app 创建的 React 单页应用程序，一个非常简单的应用程序，只有几条路线。

App.js

import React from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

import ArticleShow from './components/ArticleShow';
import Homepage from './components/Homepage';

export default class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <section className="Header">
          <div className="container-fluid">
            <div className="row">
              <div className="col-4">
                <Link to="/" target="_self">
                  <span className="title">
                    <span className="title-feathers">Feathers</span>
                    <span className="title-4u">4U</span>
                  </span>
                </Link>
              </div>
              <div className="col-2  align-self-center" style={{ textAlign: "center" }}>
                <a href="https://feathersjs.com/" target="_new">
                  FeathersJS website
              </a>
              </div>
              <div className="col-2  align-self-center" style={{ textAlign: "center" }}>
                <Link to="/article/emerald-realm" target="_self">
                  Emerald Realm
              </Link>
              </div>
              <div className="col-2  align-self-center" style={{ textAlign: "center" }}>
                <Link to="/article/ed-de-almeida" target="_self">
                  Ed de Almeida
              </Link>
              </div>
              <div className="col-2  align-self-center" style={{ textAlign: "center" }}>
                <Link to="/article/services">
                  Services
              </Link>
              </div>
            </div>
          </div>
        </section>
        <section className="Contents">
          <div className="container-fluid">
            <div className="row">
              <div className="col-3">
                <div className="card">
                  <div className="card-header">
                    Articles
                </div>
                  <div className="card-body">
                    list
                </div>
                </div>
              </div>
              <div className="col-7">
                <div className="Article">
                  <Switch>
                    <Route exact path="/" component={Homepage} />
                    <Route path="/article/:file" component={ArticleShow} />
                  </Switch>
                </div>
              </div>
              <div className="col-2">
                <div className="card">
                  <div className="card-header">
                    Other sites
                </div>
                  <div className="card-body">
                    list
                </div>
                </div>
                <div className="card">
                  <div className="card-header">
                    Sponsors
                </div>
                  <div className="card-body">
                    list
                </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="Footer"></section>
      </BrowserRouter>
    )
  }
}

当我导航到 http://myserver.com 时然后单击顶部菜单中的链接之一，输入“Ed de Almeida”，其 URL 为 /article/ed-de-almeida它正确选择了 markdown 文件 ed-de-almeida.md在某个目录中，将其转换为 HTML 并使用 ArticleShow 将其显示在页面的中央时代成分。这工作正常。

但是当我直接访问http://myserver.com/article/ed-de-almeida时或者当页面正确在此 route 时刷新页面，我收到一条错误消息:

entry not found: /article/ed-de-almeida.

我错过了什么？因为我确信我在这里遗漏了一些东西!

编辑

ArticleShow.js

import React from 'react';

const showdown  = require('showdown');
const converter = new showdown.Converter();

export default class ArticleShow extends React.Component {

    state = {
        text: { __html: "<div></div>" }
    }

    componentWillMount() {
        let articleURL = '/articles/' + this.props.match.params.file + '.md';
        window.fetch(articleURL)
        .then(res => res.text())
        .then(txt => converter.makeHtml(txt))
        .then(html => this.setState({
            text: { __html: html }
        }))
    }

    render() {
        return(
            <div dangerouslySetInnerHTML={this.state.text}></div>
        )
    }
}

Answer 1

TL;DR:您必须将托管 SPA 的网络服务器配置为始终为您的 index.html 提供服务，无论请求的路径如何。

当您转到http://myserver.com时，默认页面由您的网络服务器提供，通常可以在 http://myserver.com/index.html 上获得相同的页面。当它被提供时，你的 JavaScript 被解析并运行，当你转到另一个路由时，它不会重新加载页面(因此单页应用程序)，但会更改 url/搜索字段中的 url在您的浏览器中。这样就可以了。

现在，当您直接进入子路由时，例如 http://myserver.com/article/ed-de-almeida，使用默认的 Web 服务器配置，它将尝试提供该页面http://myserver.com//article/ed-de-almeida/index.html。这不是您想要的，因为您拥有的唯一真实页面位于 http://myserver.com/index.html。因此，您必须配置网络服务器，为客户端请求的每个路径提供位于 index.html 的页面，并让 SPA 读取路由并显示正确的组件。

我将为您提供 2 个非常常见的网络服务器的 2 个示例:Apache HTTPd 和 nginx:

对于 Apache HTTPd:

<VirtualHost *:80>
    ServerName mydomainname.tld
    DirectoryIndex index.html
    DocumentRoot /var/www/html

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Location /myreactapp >
        RewriteEngine on
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule . /mySPA/index.html [L]
    </Location>
</VirtualHost>

或者对于 nginx:

server {
    server_name mydomainname.tld;
    index index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /usr/share/nginx/html;

    location /mySPA {
        try_files $uri $uri/ /mySPA/index.html;
    }
}