ReactJS 路由（捕获的 URL 不正确）

Question

我有一个部署了许多 OSS 框架的应用程序，每个框架都有自己的管理 UI。我想构建一个 reactjs 页面，允许用户通过左导航菜单浏览到这些 UI 中的每一个，并将相应的 UI 加载到 iframe 中。我的代码在这里：https://github.com/llevar/react-test，最初是使用 create react app 创建的。

此应用程序在 nginx 下运行，其中每个 URL（例如 /chronograf/、/consul/）都配置为获取相应的 UI。事实上，当我 curl http://mysite/consul/ 返回的 HTML 来自 Consul UI。但是当我使用我的导航，或者在浏览器中转到http://mysite/consul/ 时，URL 似乎被reactjs 拦截，并最终呈现主页。

是什么导致了这种行为？我该如何解决？提前致谢。

Answer 1

这是我对您的问题的看法： 例如react-router-4 medium post

我对您的App.js 进行了一些更改，在我的示例中它开始起作用，并且应该在您的真实设置下对您起作用。

首先，我将 App 主组件更改为使用 React Router 组件：

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

import './App.css';

const { Header, Footer, Sider, Content } = Layout;


class App extends Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/chronograf" component={() => <Home src="/chronograf" />} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <Layout>
        <Layout>
          <Sider
            breakpoint="lg"
            collapsedWidth="0"
          >
            <Menu>
              <Link to="/chronograf">chronograf</Link>
              <br />
              <Link to="/">Home</Link>
            </Menu>
          </Sider>
        </Layout>
        <Content>
          <MainBody src={this.props.src} />
        </Content>
        <Footer>footer</Footer>
      </Layout>
    );
  }
}

class MainBody extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <iframe src={this.props.src} title="mainBody" />
    );
  }
}

export default App;

当然重复Home 组件是个坏主意，因此您可以将所有路由放在某个数组中，然后将其映射到此处。

Home 作为组件包含带有链接的菜单（同样是简单的反应路由器组件）。

Link 管理您更改网址所需的一切。

您可以使用组件并通过逻辑、组件嵌套、添加反应路由器功能更正确地重新排列它们，但至少提供的示例显示了您如何做到这一点。

我如何运行这个： - 使用npm run build 或yarn build 构建您的页面 - 将文件夹放入 nginx 可访问的位置（我使用 /Users/web/react-test-master） - 配置 nginx 以监视构建的 html 和一个名为 chronograf 的文件夹，带有简单的 html 页面 - 启动了 nginx，它就可以正常工作，我在某处丢失了样式，但逻辑运行良好。

这是我使用的 nginx 配置：

    events {  }

    http {
     default_type  application/octet-stream; 
     charset   utf-8;
     keepalive_timeout  65;
     server_tokens       off;
     tcp_nopush          on;
     tcp_nodelay         off;

     server {
      listen       8090;
      server_name  localhost;

      location / { 
        root   /Users/web/react-test-master/build;
        index  index.html index.htm;
      }
      location /chronograf {
        root   /Users/web/react-test-master/build;
        index  index.html index.htm;
      }
     }
   include  v.hosts/*.conf;
  } 

我希望这对你有用。