React Router를 사용하는 React.js 응용 프로그램의 구조는 다음과 같습니다 .

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

일부 속성을 Comments구성 요소 에 전달하고 싶습니다 .

(일반적으로 나는 이렇게 할 것이다 <Comments myprop="value" />)

React Router로 가장 쉽고 올바른 방법은 무엇입니까?

최신 정보

새로운 릴리스 이후 Route래퍼를 사용하지 않고 구성 요소 를 통해 직접 소품을 전달할 수 있습니다 . 예를 들어 prop 를 사용render 합니다.

구성 요소:

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

용법:

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

코드 및 상자 예

구 버전

내가 선호하는 방법은 Comments구성 요소를 감싸고 래퍼를 경로 처리기로 전달하는 것입니다.

다음은 변경 사항이 적용된 예입니다.

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

래퍼를 쓰지 않으려면 다음과 같이하십시오.

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

허용 된 응답에서 ciantic 의 주석에서 복사 :

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

이것은 제 생각에 가장 우아한 해결책입니다. 효과가있다. 나를 도와 주었다.

이것은 yuji 가 불편한 의견을 남기지 않고 Rajesh 의 솔루션으로 React Router 4 용으로 업데이트되었습니다.

코드는 다음과 같습니다.

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

render대신을 사용 합니다 component. 그 이유는 원하지 않는 재 장착 을 피하기 위함입니다 . 또한 props해당 메소드에 전달하고 , Object Spread 연산자 (ES7 제안)와 함께 Comments 구성 요소에 동일한 소품을 사용합니다.

ColCh의 답변에 대한 후속 조치입니다. 구성 요소의 래핑을 추상화하는 것은 매우 쉽습니다.

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

이 솔루션을 아직 테스트하지 않았으므로 피드백이 중요합니다.

이 방법을 사용하면 라우터를 통해 전송 된 소품 (예 : 매개 변수)을 덮어 쓰거나 제거한다는 점에 유의해야합니다.

소품을 <RouteHandler>v0.13.x에서 또는 v1.0에서 Route 구성 요소 자체에 전달하여 소품을 전달할 수 있습니다 .

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

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

( https://github.com/rackt/react-router/releases/tag/v1.0.0 의 업그레이드 안내서에서 )

모든 하위 처리기는 동일한 소품 세트를 받게됩니다. 상황에 따라 유용 할 수도 있고 그렇지 않을 수도 있습니다.

ES6을 사용하면 구성 요소 래퍼를 인라인으로 만들 수 있습니다.

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

자녀를 합격시켜야하는 경우 :

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

반응 라우터 v4 알파

이전 방법과 매우 유사하지만 새로운 방법이 있습니다.

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 이것은 알파 버전에서만 작동하며 v4 알파 릴리스 이후에 제거되었습니다. v4 최신에서는 경로와 정확한 소품으로 다시 한 번입니다.

react-lego 예제 앱은 react-router-4 브랜치의 route.js에서 정확히 이것을 수행하는 코드를 포함합니다

다음은 가장 깨끗한 솔루션입니다 (React Router v4).

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

MyComponent아직이 props.match과 props.location하고있다 props.foo === "lol".

상태 비 저장 함수 구성 요소로 감싸십시오.

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

또한 래퍼 구성 요소를 피하고보다 쉽게 ​​부모의 상태를 소품으로 전달하기 위해 RouteHandler 믹스 인을 사용할 수 있습니다.

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

다음 <RouterHandler/>과 같은 방법으로 소품을 전달할 수 있습니다 .

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

이것의 단점은 소품을 무차별 적으로 전달한다는 것입니다. 따라서 Comments경로 구성에 따라 실제로 다른 구성 요소를위한 소품을받을 수 있습니다. props불변 이기 때문에 큰 문제 는 아니지만 두 개의 다른 구성 요소가 이름이 foo있지만 값이 다른 소품을 기대하는 경우 문제가 될 수 있습니다 .

1.0 및 2.0에서는 createElementprop of Router를 사용하여 대상 요소를 정확하게 작성하는 방법을 지정할 수 있습니다 . 설명서 소스

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

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

es6 및 stateless 함수 를 결합 하여 훨씬 더 깨끗한 결과를 얻을 수 있습니다.

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

리 액트 라우터 v 4 솔루션

나는 오늘 일찍이 질문에 걸려 넘어졌으며 여기에 내가 사용하는 패턴이 있습니다. 잘하면 이것은 최신 솔루션을 찾는 사람에게 유용합니다.

이것이 최선의 해결책 인지 확실하지 않지만 이것이 나의 현재 패턴입니다. 일반적으로 자주 사용하는 구성 요소를 관련 구성 (로더, 모달 등)으로 유지하는 Core 디렉토리가 있으며 다음과 같은 파일을 포함합니다.

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

그런 다음 해당 파일에서 다음을 수행합니다.

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

구성 요소의 기본 내보내기를 겸손한 낙타 케이스로 가져 오면 CamelCase에서 새로운 위치 인식 구성 요소의 이름을 지정하여 정상적으로 사용할 수 있습니다. 추가 가져 오기 라인과 할당 라인 이외의 구성 요소는 예상대로 작동하고 모든 경로 소품을 추가하여 모든 소품을 정상적으로받습니다. 따라서 this.props.history.push ()를 사용하여 구성 요소 수명주기 메소드에서 행복하게 리디렉션하고 위치를 확인할 수 있습니다.

도움이 되었기를 바랍니다!

반응 라우터 2.x의 경우.

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

그리고 당신의 경로에서 ...

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

3 번째 매개 변수가 다음과 같은 객체인지 확인하십시오 { checked: false }.

React Router의 문제점은 컴포넌트를 렌더링하여 소품 전달을 중단한다는 것입니다. 반면 내비게이션 라우터를 사용하면 고유 한 구성 요소를 렌더링 할 수 있습니다. 즉, 다음 코드와 함께 JsFiddle 쇼 와 같이 소품을 전달하기 위해 농구 대를 뛰어 넘을 필요가 없습니다 .

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

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

또는 당신은 이런 식으로 할 수 있습니다 :

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

반응 라우터 2.5.2의 경우 솔루션이 너무 쉽습니다.

    //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'})}
  )
}
...

사용자 지정 경로 구성 요소를 사용하면 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>
);

에 관해서는 <MyRoute>구성 요소 코드, 그것은 뭔가를 같이해야한다 :

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;

사용자 지정 경로 구성 요소 접근 방식에 대한 자세한 내용은 다음 주제에 대한 내 블로그 게시물을 확인하십시오. http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

이것은 아마도 쿠키 핸들러와 함께 react-router-dom을 사용하는 가장 좋은 방법입니다

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

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;

위와 같은 솔루션을 사용하면 v3.2.5에서 작동합니다.

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

또는

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