反应路由器+电子位置“/”不符合任何路线

我刚开始使用电子，我一直在积极应对路由器的问题。我不断收到这样的警告无论我做什么：反应路由器+电子位置“/”不符合任何路线

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> 
    ); 
    } 
}

我注意到，反应路由器在斜杠前添加hashtag。我敢肯定，我做了一个新手的错误的地方，但我无法找出什么是错的......

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

我看过其他类似的问题，但没有运气。你的帮助将非常感激。

来源

2017-02-22 Raymond

由于导入和导出方式不匹配，请使用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;

由于您是通过应用程序组件返回所有的路由，所以通过ReactDOM.render渲染成分，像这样：

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

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

来源

2017-02-22 16:04:49

你正在出口您的路线：

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

因此，你需要导入他们是这样的：

import routes from './routes'

默认出口是无名的，因此需要不带括号进口。如果用括号括起来，它会寻找名为导出的。

更新

值得一提的是，你可以选择任何名称将其导入。这是一个未命名的导出，所以它的名称是什么并不重要。你可以（但不会）像这样导入它：

import foo from './routes'

而且它没有区别。

来源

2017-02-22 16:12:26 Samo

您的代码中可能没有使用路由器组件，这是通过ReactDOM呈现为dom的地方。请在下面检查工作代码片段。

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'));

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

来源

2017-02-22 16:18:24 WitVault

反应路由器+电子位置“/”不符合任何路线

回答

相关问题