Question

我刚刚从电子开始，我一直在将react-router与它集成在一起。无论我做什么，我都会继续发出警告：

Warning: [react-router] Location "/" did not match any routes

路由器：

"use babel"

import React from 'react'
import { Router, hashHistory } from 'react-router'

/* ******************
    IMPORTS
*********************/

import {routes} from './routes'

const App = () => {
    return (
      <Router history={hashHistory} routes={routes} />
    );
}

export default App

路线：

"use babel"

import React from 'react'
import { Route, IndexRoute } from 'react-router';

/* ******************
    IMPORTS
*********************/

import App from './src/app.js'
import Root from './src/root'

export default (
    <Route path="/" component={Root} />
);

根：

import React, { Component } from 'react'

export default class Root extends Component {
  render() {
    return (
      <div>test</div>
    );
  }
}

我注意到react-router正在斜杠之前添加＃标签。我很确定我在某个地方犯了一个菜鸟错误，但我找不到有什么问题......

网址：file:///C:/wamp/www/electron_projects/projectOne/index.html#/

我读过其他类似的问题，但没有运气。非常感谢您的帮助。

Answer 1

由于导入和导出方式不匹配，请使用named or default import/export。

默认导入/导出：

import routes from './routes';

在routes.js中定义它：

let routes = (
    <Route path="/" component={Root} />
);

export default routes;

命名导入/导出：

import {routes} from './routes';

在routes.js中定义它：

let routes = (
    <Route path="/" component={Root} />
);

export routes;

由于您要按App组件返回所有路由，因此请按ReactDOM.render呈现该组件，如下所示：

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

阅读这两者之间的区别：https://danmartensen.svbtle.com/build-better-apps-with-es6-modules

Answer 2

您正在导出这样的路线：

export default (
    <Route path="/" component={Root} />
);

因此你需要像这样导入它们：

import routes from './routes'

默认导出未命名，因此需要在不使用括号的情况下导入。如果用括号括起来，它会查找名为的导出。

<强>更新

值得注意的是，您可以按您选择的任何名称导入它们。这是未命名的导出，因此您导入的名称无关紧要。你可以（但不会）这样导入它：

import foo from './routes'

它不会有所作为。

Answer 3

您可能没有在代码中使用路由器组件，即通过ReactDOM呈现到dom的位置。请在下面查看工作代码段。

＆＃13;

let Router = ReactRouter.Router;
let RouterContext = Router.RouterContext;
let Route = ReactRouter.Route;

const Root = (props) => {
  return (
        <div>
           <h1>test</h1>
        </div>
    );
};


const routes = (
       <Route path="/" component={Root} /> 
);


const router = (
<Router history={ReactRouter.hashHistory} routes={routes}/>
);


ReactDOM.render(
router, 
document.getElementById('test'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.0/ReactRouter.min.js"></script>

<div id="test"></div>

＆＃13;

React-router +电子位置“/”与任何路线都不匹配

3 个答案: