反應路由器+電子位置「/」不符合任何路線

我剛開始使用電子，我一直在積極應對路由器的問題。我不斷收到這樣的警告無論我做什麼：反應路由器+電子位置「/」不符合任何路線

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

反應路由器+電子位置「/」不符合任何路線

回答

相關問題