獲取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路由的電子應用路徑

回答

相關問題