Question

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

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

导致此行为的原因是什么？我该如何解决？提前致谢。

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;
  }

我希望这对你有用。

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

1 个答案: