Question

我刚刚开始学习如何使用Electron创建桌面应用，并尝试将react-router与Electron一起使用，但我一直收到错误消息 Warning: [react-router] Location "/" did not match any routes

main.js

app.on('ready', () => {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);
  win.webContents.openDevTools();

  win.on('closed', () => win = null);
})

routes.js

import App from './app';
import { Router, Route, hashHistory } from 'react-router';
import React from 'react';

const routes = (
  <Router>
    <Route path="/" component={App}/>
  </Router>
);

index.js

import ReactDOM from 'react-dom';
import React from 'react';
import { Router, hashHistory } from 'react-router';
import routes from './routes';

ReactDOM.render(<Router routes={routes} history={hashHistory}/>, document.getElementById('app'));

app.js

import React, { Component } from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

我该怎么做才能解决这个问题？

Answer 1

没有注意到。您在routes.js中声明路由器，然后在索引中声明另一个路由器将路由作为prop传递。

我认为你应该改变你的routes.js（你必须导出你的路线const）。

路线：

import App from './app';
import { Router, Route, hashHistory } from 'react-router';
import React from 'react';

const routes = (
   <Router history={hashHistory}>
   <Route path="/" component={App}/>
  </Router>
);

module.exports = routes;

现在您可以在索引中导入它，并且应该直接渲染您的路线：

import ReactDOM from 'react-dom';
import React from 'react';
import { Router, hashHistory } from 'react-router';
import routes from './routes';

ReactDOM.render(routes, document.getElementById('app'));

Answer 2

您是否尝试将历史道具放入路由器？

<Router history={hashHistory}>

使用React和Electron - react-router错误

2 个答案: