陣營路由器導航不起作用

我實現了一個反應JS測試應用程序與ES6反應的路由器，但它似乎並沒有工作。下面的代碼片段：陣營路由器導航不起作用

app.js 
------- 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Routes from './routes'; 

ReactDOM.render(Routes, document.getElementById('react-container')); 

routes.js 
--------- 

import React from 'react'; 
import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router'; 
import Page1 from './page1'; 
import Home from './home'; 
import { IndexRoute } from 'react-router'; 

let routes = 
    <Router> 
    <Route path="/" component={Home}> 
     <Route path="page1" component={ Page1 }/> 
    </Route> 
    </Router> 

export default routes 

home.js 
------- 

import React, { Component } from 'react'; 
import Header from './components/header'; 

export default class Home extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

page1.js 
-------- 

import React, { Component } from 'react'; 

export default class Page1 extends Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <div> 
     <h1> Page 1 </h1> 
     </div> 
    ); 
    } 
}

導航到「/」和「/ page1」似乎落在僅指示標題部分的頁面中。任何幫助讚賞。

來源

2016-01-19 KarthikJ

你能向我們展示第1頁分量什麼辦法？ –

@NaderDabit page1.js也包含在上面。 – KarthikJ

你應該離開了constructor時，它沒有做任何事情。默認的構造函數是：

constructor(...args) { 
    super(...args); 
}

所以隱含的道具參數沒有傳遞到Home組件。

來源

2016-01-19 03:47:33 mjhm

感謝您的及時迴應。我刪除了所有的構造函數，因爲它沒有做任何事情，但仍然導航不起作用。 – KarthikJ

這聽起來像你想渲染page1現身導航到/什麼時候？如果是這樣，那你就需要一個IndexRoute的docs seem to indicate有/路線page1默認：

let routes = (
    <Router> 
    <Route path="/" component={Home}> 
     <IndexRoute component={Page1} /> 
    </Route> 
    </Router> 
);

來源

2016-01-22 17:33:00

我不能對此進行測試，但我認爲，如果沒有提供歷史，反應路由器將無法讀取URL位置。所以它只適合呈現/路徑。

<Router history={browserHistory}> 
... 
</Router>

來源

2016-01-23 03:38:11 Raspo

我很確定這一點，結合索引路線是解決方案。 – Aaron

大部分的答案觸及這些獨特的，但我認爲你需要一個索引的路線，瀏覽器的歷史結合起來，將您導出到這樣的反應成分：

import { Router, browserHistory } from 'react-router' 

const Routes =() => { 
    return (
     <Router history={browserHistory}> 
      <Route path="/" component={Home}> 
       <IndexRoute component={Page1}/> 
      </Route> 
     </Router> 
    ) 
} 

export default Routes;

這應該對於最新版本是有效的做出反應路由器（2.0.0-RC5）

來源

2016-01-28 01:06:35 Aaron

陣營路由器導航不起作用

回答

相關問題