Điều hướng bộ định tuyến phản ứng không hoạt động

Question

Tôi đã triển khai ứng dụng thử nghiệm JS phản ứng với bộ định tuyến phản ứng trong ES6 nhưng có vẻ như nó không hoạt động. Đoạn mã i bên dưới:

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

Điều hướng đến "/" và "/ page1" dường như nằm trong trang chỉ phần tiêu đề. Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Bạn nên bỏ qua số constructor khi không hoạt động. Phương thức khởi tạo mặc định là:

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

Vì vậy, các đối số đạo cụ ngầm không được chuyển vào thành phần Home.

Answer 2

Có vẻ như bạn muốn hiển thị page1 để hiển thị khi điều hướng đến /? Nếu vậy, docs seem to indicate rằng bạn sẽ cần một IndexRoute có / đường đến page1 theo mặc định:

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

Answer 3

tôi đã không thể kiểm tra điều này, nhưng tôi nghĩ rằng nếu không có cung cấp một lịch sử, phản ứng-router sẽ không thể đọc vị trí URL. Vì vậy, nó sẽ có ý nghĩa cho nó để chỉ render đường dẫn /.

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

Answer 4

Hầu hết các câu trả lời liên lạc bằng các cá nhân, nhưng tôi nghĩ rằng bạn cần phải kết hợp một con đường chỉ mục, lịch sử trình duyệt, và biến xuất khẩu của bạn thành một thành phần phản ứng như thế này:

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

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

export default Routes; 

này nên có giá trị cho phiên bản mới nhất của React Router (2.0.0-rc5)