获取React路由的电子应用路径

我对React和React路由很新颖，所以也许我完全在错误的路径上。欢迎任何帮助！所以我有一个电子应用运行是这样的：获取React路由的电子应用路径

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

我加载我的应用程序组件放入容器（startView）中的index.html：

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

我的问题是我不能让主成分来呈现，因为我的应用程序的inital路线显然是不同的。删除'精确'参数的工作原理是渲染Home，但其后路由不再适用于其他路由（/ newView），这也是有道理的。任何机会，我可以让家里呈现我的应用程序的初始路径，而其他路线仍然工作？

来源

2017-12-18 JDK92

只有两页正确吗？主页上有一个登录按钮，点击登录后会进入另一个页面。 – illiteratewriter

最后，我有3或4个意见，但用户基本上是通过他们指导。意味着登录 - >查看1 - >查看2等总是进入下一个查看通过点击按钮 – JDK92

import React from 'react' 
import { 
    BrowserRouter as Router, 
    Link, 
    Route, 
    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> 
); 

class App extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Router> 

     <Switch> 
     <Route path="/" exact component={Home}/> 
     <Route path="/newView" component={LoggedIn}/> 
     </Switch> 

     </Router> 
    ); 
    } 
} 

export default App;

包装你的switch语句与路由器，让我知道，如果它

来源

2017-12-18 14:38:41 illiteratewriter

不幸的是没有。我认为当我开始我的电子应用程序时，它永远不会走到“/”的路径。这就是为什么它什么都不显示。它永远不会到家路线... – JDK92

我跑这没有电子，它的工作。 – illiteratewriter

电子是这里的问题。在下面检查我的答案！感谢你的帮助。 – JDK92

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

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;

来源

2017-12-18 21:58:38 JDK92

获取React路由的电子应用路径

回答

相关问题