Tôi có cấu trúc sau cho ứng dụng React.js của mình bằng React Router :

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Tôi muốn chuyển một số thuộc tính vào Commentsthành phần.

(thông thường tôi sẽ làm như thế này <Comments myprop="value" />)

Cách dễ nhất và đúng để làm như vậy với React Router?

CẬP NHẬT

Kể từ khi phát hành mới, có thể truyền đạo cụ trực tiếp qua Routethành phần mà không cần sử dụng Wrapper. Ví dụ, bằng cách sử dụng renderprop .

Thành phần:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

Sử dụng:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

Ví dụ về Codeandbox

PHIÊN BẢN CŨ

Cách ưa thích của tôi là bọc Commentsthành phần và vượt qua trình bao bọc như một trình xử lý tuyến.

Đây là ví dụ của bạn với những thay đổi được áp dụng:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      <Comments myprop="myvalue"/>
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Nếu bạn không muốn viết trình bao bọc, tôi đoán bạn có thể làm điều này:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Sao chép từ các ý kiến ​​của ciantic trong phản hồi được chấp nhận:

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

Đây là giải pháp duyên dáng nhất theo ý kiến ​​của tôi. Nó hoạt động. Giúp tôi với.

Đây là giải pháp từ Rajesh , không có sự bất tiện nào được bình luận bởi yuji và được cập nhật cho React Router 4.

Mã sẽ như thế này:

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

Lưu ý rằng tôi sử dụng renderthay vì component. Lý do là để tránh những cuộc hẹn hò không mong muốn . Tôi cũng chuyển propsphương thức đó và tôi sử dụng cùng các đạo cụ trên thành phần Nhận xét với toán tử trải rộng đối tượng (đề xuất ES7).

Chỉ cần theo dõi câu trả lời của ColCh. Nó khá dễ dàng để trừu tượng hóa gói của một thành phần:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

Tôi chưa thử nghiệm giải pháp này vì vậy mọi phản hồi đều quan trọng.

Điều quan trọng cần lưu ý là với phương pháp này, mọi đạo cụ được gửi qua Bộ định tuyến (như params) sẽ bị ghi đè / xóa.

Bạn có thể truyền đạo cụ bằng cách chuyển chúng đến <RouteHandler>(trong v0.13.x) hoặc chính thành phần Tuyến đường trong v1.0;

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

(từ hướng dẫn nâng cấp tại https://github.com/rackt/react-router/release/tag/v1.0.0 )

Tất cả những người xử lý trẻ em sẽ nhận được một bộ đạo cụ giống nhau - điều này có thể hữu ích hoặc không tùy thuộc vào hoàn cảnh.

Sử dụng ES6, bạn chỉ có thể tạo các trình bao bọc thành phần nội tuyến:

<Route path="/" component={() => <App myProp={someValue}/>} >

Nếu bạn cần vượt qua trẻ em:

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >

React-router v4 alpha

bây giờ có một cách mới, để làm điều này, mặc dù rất giống với phương pháp trước đó.

import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    exactly: true,
    pattern: '/',
    title: `${siteTitle} - homepage`,
    component: Homepage
  }

<Match { ...route } render={(props) => <route.component {...props} />} />

PS Điều này chỉ hoạt động trong phiên bản alpha và đã bị xóa sau khi phát hành v4 alpha. Trong phiên bản v4 mới nhất, một lần nữa, với đường dẫn và đạo cụ chính xác.

Reac -lego, một ứng dụng ví dụ chứa mã thực hiện chính xác điều này trong Rout.js trên nhánh Reac-router-4 của nó

Đây là giải pháp sạch nhất mà tôi đã đưa ra (React Router v4):

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponentvẫn có props.matchvà props.location, và có props.foo === "lol".

Gói nó với một thành phần chức năng phi trạng thái:

<Router>
  <Route 
    path='/' 
    component={({children}) => 
      <MyComponent myProp={'myVal'}>{children}</MyComponent/>
    }/>
</Router>

Bạn cũng có thể sử dụng mixin RouteHandler để tránh thành phần trình bao bọc và dễ dàng chuyển trạng thái của cha mẹ hơn thành đạo cụ:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Index = React.createClass({
      mixins: [RouteHandler],
      render: function () {
        var handler = this.getRouteHandler({ myProp: 'value'});
        return (
            <div>
                <header>Some header</header>
                {handler}
           </div>
        );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Bạn có thể chuyển qua các đạo cụ thông qua <RouterHandler/>như thế này:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    var props = this.props; // or possibly this.state
    return (
        <div>
            <header>Some header</header>
            <RouteHandler {...props} />
        </div>
    );
  }
});

Nhược điểm của việc này là bạn đang truyền đạo cụ một cách bừa bãi. Vì vậy, Commentscuối cùng có thể nhận được đạo cụ thực sự dành cho một thành phần khác tùy thuộc vào cấu hình tuyến đường của bạn. Nó không phải là một vấn đề lớn vì propsnó là bất biến, nhưng điều này có thể có vấn đề nếu hai thành phần khác nhau đang mong đợi một chỗ dựa có tên foonhưng với các giá trị khác nhau.

Trong 1.0 và 2.0, bạn có thể sử dụng createElementprop of Routerđể chỉ định chính xác cách tạo phần tử mục tiêu của mình. Nguồn tài liệu

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

Bạn cũng có thể kết hợp các chức năng es6 và không trạng thái để có kết quả rõ ràng hơn:

import Dashboard from './Dashboard';
import Comments from './Comments';

let dashboardWrapper = () => <Dashboard {...props} />,
    commentsWrapper = () => <Comments {...props} />,
    index = () => <div>
        <header>Some header</header>
        <RouteHandler />
        {this.props.children}
    </div>;

routes = {
    component: index,
    path: '/',
    childRoutes: [
      {
        path: 'comments',
        component: dashboardWrapper
      }, {
        path: 'dashboard',
        component: commentsWrapper
      }
    ]
}

Giải pháp React Router v 4

Tôi vấp phải câu hỏi này sớm hơn hôm nay, và đây là mẫu tôi sử dụng. Hy vọng rằng điều này hữu ích cho bất cứ ai tìm kiếm một giải pháp hiện tại.

Tôi không chắc đây có phải là giải pháp tốt nhất không , nhưng đây là mô hình hiện tại của tôi cho việc này. Tôi thường có một thư mục Core nơi tôi giữ các thành phần thường được sử dụng với các cấu hình có liên quan của chúng (bộ tải, phương thức, v.v.) và tôi bao gồm một tệp như thế này:

import React from 'react'
import { Route } from 'react-router-dom'

const getLocationAwareComponent = (component) => (props) => (
  <Route render={(routeProps) => React.createElement(component, 
{...routeProps, ...props})}/>
)

export default getLocationAwareComponent

Sau đó, trong tệp được đề cập, tôi sẽ làm như sau:

import React from 'react'
import someComponent from 'components/SomeComponent'
import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent'
const SomeComponent = getLocationAwareComponent(someComponent)

// in render method:
<SomeComponent someProp={value} />

Bạn sẽ nhận thấy tôi nhập xuất khẩu mặc định thành phần của mình dưới dạng vỏ lạc đà khiêm tốn, cho phép tôi đặt tên cho thành phần mới, nhận biết vị trí trong CamelCase để tôi có thể sử dụng bình thường. Khác với dòng nhập bổ sung và dòng gán, thành phần hoạt động như mong đợi và nhận tất cả các đạo cụ của nó một cách bình thường, với việc bổ sung tất cả các đạo cụ tuyến. Vì vậy, tôi có thể vui vẻ chuyển hướng từ các phương thức vòng đời thành phần với this.props.history.push (), kiểm tra vị trí, v.v.

Hi vọng điêu nay co ich!

Đối với bộ định tuyến phản ứng 2.x.

const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>;

và trong các tuyến đường của bạn ...

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

đảm bảo tham số thứ 3 là một đối tượng như: { checked: false } .

Vấn đề với Bộ định tuyến React là nó kết xuất các thành phần của bạn và do đó ngăn bạn chuyển qua các đạo cụ. Mặt khác , bộ định tuyến Điều hướng cho phép bạn kết xuất các thành phần của riêng mình. Điều đó có nghĩa là bạn không phải nhảy qua bất kỳ vòng đua nào để chuyển qua các đạo cụ như đoạn mã sau và chương trình JsFiddle đi kèm .

var Comments = ({myProp}) => <div>{myProp}</div>;

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

Sử dụng thành phần có hoặc không có bộ định tuyến dựa trên câu trả lời của Rajesh Naroth.

class Index extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {
    const foo = (this.props.route) ? this.props.route.foo : this.props.foo;
    return (
      <h1>
        Index - {foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Hoặc bạn có thể làm theo cách này:

export const Index = ({foo, route}) => {
  const content = (foo) ? foo : (route) ? route.foo : 'No content found!';
  return <h1>{content}</h1>
};

đối với bộ định tuyến phản ứng 2.5.2, giải pháp rất dễ dàng:

    //someConponent
...
render:function(){
  return (
    <h1>This is the parent component who pass the prop to this.props.children</h1>
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

Sử dụng một thành phần tuyến tùy chỉnh , điều này có thể có trong React Router v3.

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
  <Route path="/" handler={Index}>
    <MyRoute myprop="value" path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

Đối với <MyRoute>mã thành phần, nó phải là một cái gì đó như:

import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';

const MyRoute = () => <div>&lt;MyRoute&gt; elements are for configuration only and should not be rendered</div>;

MyRoute.createRouteFromReactElement = (element, parentRoute) => {
    const { path, myprop } = element.props;
    // dynamically add crud route
    const myRoute = createRoutesFromReactChildren(
        <Route path={path} />,
        parentRoute
    )[0];
    // higher-order component to pass myprop as resource to components
    myRoute.component = ({ children }) => (
        <div>
            {React.Children.map(children, child => React.cloneElement(child, { myprop }))}
        </div>
    );
    return myRoute;
};

export default MyRoute;

Để biết thêm chi tiết về cách tiếp cận thành phần tuyến đường tùy chỉnh, hãy xem bài đăng trên blog của tôi về chủ đề: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

đây có lẽ là cách tốt nhất để sử dụng Reac-router-dom với trình xử lý cookie

trong index.js

import React, { Component } from 'react'
import {Switch,Route,Redirect} from "react-router-dom"
import {RouteWithLayout} from "./cookieCheck"

import Login from "../app/pages/login"
import DummyLayout from "../app/layouts/dummy"
import DummyPage from "../app/pages/dummy" 

export default ({props})=>{
return(
    <Switch>
        <Route path="/login" component={Login} />
        <RouteWithLayout path="/dummy" layout={DummyLayout} component={DummyPage} 
        {...props}/>
        <Redirect from="/*" to="/login" />
    </Switch>
  )
}

và sử dụng cookieCheck

import React , {createElement} from 'react'
import {Route,Redirect} from "react-router-dom"
import {COOKIE,getCookie} from "../services/"

export const RouteWithLayout = ({layout,component,...rest})=>{
    if(getCookie(COOKIE)==null)return <Redirect to="/login"/>
        return (
        <Route {...rest} render={(props) =>
            createElement(layout, {...props, ...rest}, createElement(component, 
      {...props, ...rest}))
       }
      />
    )
}

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      data:null
    }


  }
 componentDidMount(){
   database.ref().on('value', (snapshot) =>{
     this.setState({
       data : snapshot.val()
      })
   });
 }

  render(){
  //  const { data } = this.state
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path = "/" component = { LandingPage }  />
        <Route 
          path='/signup' 
          render = { () => <Signup  data = {this.state.data} />} />
        </Switch>
    </BrowserRouter>

  );
  }
};

export default App;

Sử dụng giải pháp như trên và điều này hoạt động trong v3.2.5.

<Route
  path="/foo"
  component={() => (
    <Content
      lang="foo"
      meta={{
        description: lang_foo.description
      }}
    />
  )}
/>

hoặc là

<Route path="/foo">
  <Content
    lang="foo"
    meta={{
      description: lang_foo.description
    }}
  />
</Route>