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

  • Z时代
  • 2024-01-10
  • 分类：问答

我对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），这也是有道理的。任何机会，我可以让家里呈现我的应用程序的初始路径，而其他路线仍然工作？

回答：

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语句与路由器，让我知道，如果它

回答：

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

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;

以上是 获取React路由的电子应用路径 的全部内容， 来源链接： utcz.com/qa/263650.html

回到顶部