javascript - 获取用于 React 路由的 Electron 应用程序的路径

Question

我对 React 和 React Routing 还很陌生，所以也许我完全走错了路。很高兴获得任何帮助!所以我有一个 Electron 应用程序像这样运行:

// Define Options for Window object.
let windowOptions = {
  width: 1200,
  height: 800,
  frame: false,
  devTools: true,
};

// Define empty winobject
let elWin = {};

Electron.createApp()
.then(() => Electron.createWindow(elWin, './index.html', 'file:', windowOptions))

我正在将我的应用程序组件加载到index.html 中的容器(startView)中:

//render App
ReactDOM.render((
  <BrowserRouter>
  <App />
  </BrowserRouter>),
  document.getElementById('startView')
);

为了使它更容易，我将应用程序减少到最少。所以我基本上想要的是一个初始启动 View ，稍后包含一个登录屏幕。成功登录后，单击登录按钮应该会出现一个新 View 。这就是 React 路由发挥作用的地方。应用程序如下所示:

const LoggedIn= () => (
  <div> New View</div>
);

const Home = (props) => (
  <div>
  <ul>
    <li><Link to="/newView"><button> Login </button></Link></li>
  </ul>
  </div>
);

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
      <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/newView" component={LoggedIn}/>
      </Switch>
      </div>
    );
  }
}

export default App;

我的问题是我无法渲染 Home 组件，因为我的应用程序的初始路线明显不同。删除“exact”参数是有效的，它会渲染 Home，但随后路由不再适用于其他路由(/newView)，这也有意义。当其他路线仍在工作时，我是否有机会让 Home 在我的应用程序的初始路径上呈现？

Answer 1

我设法找到了解决方法。启动 Electron 应用程序时访问当前窗口位置。工作正常!

import React from 'react';
import ReactDOM from 'react-dom';

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

const LoggedIn= () => (
   <div> New View</div>
);

const Home = (props) => (
   <div>
      <ul>
        <li><Link to="/newView"><button> Login </button></Link></li>
      </ul>
   </div>
);


const renderHomeRoute = () => {
    if (window.location.pathname.includes('index.html')) {
       return true;
    } else return false;
};

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Switch>
          {renderHomeRoute() ? <Route path="/" component={Home} /> : ''}
          <Route path="/newView" component={About} />
        </Switch>
      </div>
    );
  }
}

export default App;