获取用于 React 路由的电子应用程序路径答案

【问题标题】：Get path of electron app for React routing获取用于 React 路由的电子应用程序路径
【发布时间】：2017-12-18 13:18:27
【问题描述】：

我对 React 和 React Routing 还很陌生，所以也许我在这里完全走错了路。很高兴有任何帮助！所以我有一个像这样运行的电子应用程序：

// 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')
);

为了更容易，我将应用程序减少到最低限度。所以我基本上想要的是一个初始的起始视图，它稍后会保存一个登录屏幕。成功登录后，单击登录按钮应该会出现一个新视图。这就是 Reacts 路由发挥作用的地方。应用如下所示：

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 组件渲染，因为我的 App 的初始路由明显不同。删除 'exact' 参数有效，它呈现 Home，但随后路由不再适用于其他路由（/newView），这也是有意义的。我有没有机会让 Home 在我的应用程序的初始路径上呈现，而其他路线仍在工作？

【问题讨论】：

只有两页吧？带有登录按钮的主页，点击登录后会转到另一个页面。
最后我有 3 或 4 个视图，但用户基本上是通过它们引导的。表示登录 -> View1 -> View2 等。总是通过单击按钮进入下一个视图

标签： javascript reactjs electron react-router-v4

【解决方案1】：

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

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;

【讨论】：

【解决方案2】：

将此作为最后一条路由添加到您的路由器

<Route path="/" component={RedirectToHome} />

在此之前定义

const RedirectToHome = () => {
  return (<Redirect to="/" />);
}

别忘了从react-router-dom导入Redirect

现在您将降落在“/”而不是奇怪的路径。

【讨论】：