Замешательство React Router

Новое реагировать и реагировать маршрутизатором.

Я пытаюсь понять этот пример:

https://github.com/ReactTraining/react-router/blob/1.0.x/docs/API.md#components-1

Но this.props никогда не содержит основную или боковую панель. Мой код:

Main.js

ReactDOM.render(
    <Router>
      <Route path="/" component={App2}>
        <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>

      </Route>
    </Router>,
  document.getElementById('content')
);

App2.js

class App2 extends React.Component {
  render() {
    const {main, sidebar} = this.props;
    return (
        <div>
          <Menu inverted vertical fixed="left">
            {sidebar}
          </Menu>
          <Container className="main-container">
            {main}
          </Container>
        </div>
    );
  }
}

export default App2;

Home.js

import React from 'react';

class Home extends React.Component {

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

}

export default Home;

HomeSidebar.js

class HomeSidebar extends React.Component {
  render() {
    return (
      <div>
        <p>I'm a sidebar</p>
      </div>

    );
  }
}

export default HomeSidebar;

Я использую электрон с реактивными инструментами. Всякий раз, когда я отлаживаю, this.props не содержит ни основной, ни боковой панели. Любая идея, почему это происходит?

Я также пробовал использовать IndexRoute, но, похоже, не поддерживает компонентную поддержку.

Другие вещи, которые я пробовал

ReactDOM.render(
    <Router>
      <Route component={App2}>
        <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);

ReactDOM.render(
    <Router>
      <Route path="/" component={App2} components={{main: Home, sidebar: HomeSidebar}}>
        <Route path="admin" components={{main: Admin, sidebar: AdminSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);

ОТВЕТЫ

Ответ 1

Если вы используете текущую версию response-router (v4.0.0), похоже, что они покончили с компонентами, поддерживающими маршруты: https://reacttraining.com/react-router/web/api/Route

Вы можете отображать Маршруты в любом месте, и у них даже есть пример боковой панели, где они делают именно это. У них есть один набор компонентов Route для отображения основных компонентов и другого набора компонентов Route для боковых панелей, но оба из одной конфигурации маршрута поддерживают DRY.

Чтобы перевести это в свой код, вы можете создать конфигурацию маршрута:

const routes = [
  { path: '/',
    sidebar: Sidebar
    main: Main
  }
];

Затем в Main.js

ReactDOM.render(
    <Router>
      <Route component={App2}>
        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            component={route.main}
          />
        ))}
      </Route>
    </Router>,
  document.getElementById('content')
);

Затем в App2.js

class App2 extends React.Component {
  render() {
    return (
        <div>
          <Menu inverted vertical fixed="left">
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                component={route.sidebar}
              />
            ))}
          </Menu>
          <Container className="main-container">
            {this.props.children}
          </Container>
        </div>
    );
  }
}

export default App2;

Ответ 2

Похоже, что для работы с компонентами необходимо использовать компонент <IndexRoute /> вместо <Route />. В документах с реакционным маршрутизатором упоминается, что IndexRoute имеет все те же реквизиты, что и Route

<IndexRoute components={{main: Main, side: Side}} />

работает!

Полный код:

React.render((
  <Router>
    <Route path="/" component={App} >
      <IndexRoute components={{main: Main, side: Side}}  />
    </Route>
  </Router>
), document.getElementById('app'))

Codepen: http://codepen.io/chmaltsp/pen/ZeLaPr?editors=001

Ура!

Ответ 3

Пример из github был написан 2 года назад (посмотрите здесь), и я не уверен, для какой конкретной версии это связано. И я не уверен, что это работает сейчас (потому что я тоже новичок в реакции), но я знаю, что вы не используете этот подход для достижения этой цели, вы можете использовать отдельный компонент, который будет содержать mainz и sidebar, здесь мой пример:

class App2 extends React.Component {
  render() {
    return (
        // Your Menu.
        // Your Container.
        <div>
          {this.props.children}
        </div>
    );
  }
}
class Home extends React.Component {
  render() {
    return (<div><h1>Home</h1></div>);
  }

}
class HomeSidebar extends React.Component {
  render() {
    return (<div><p>I am a sidebar</p></div>);
  }
}
class HomeWithSidebar extends React.Component {
  render() {
    return (
      <div>
          <Home />
          <HomeSidebar />
      </div>
    );
  }
}   
ReactDOM.render(
    <Router history={browserHistory}>
      <Route path="/" component={App2}>
        <Route path="/a2" components={HomeWithSidebar} />
      </Route>
    </Router>,
  document.getElementById('content')
);

PS: Не забудьте использовать <Router history={browserHistory}> в вашем примере.
И используйте IndexRoute в вашем примере или укажите другой, например /a2 в моем примере.

Ответ 4

Я новичок, чтобы самостоятельно отреагировать на маршрутизатор, но я уверен, что используемые вами маршруты неверны. в примере, который вы даете, у вас есть два разных маршрута, которые разрешают один и тот же путь (/):

ReactDOM.render(
    <Router>
      <Route path="/" component={App2}>
      <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>

      </Route>
    </Router>,
  document.getElementById('content')
);

Я полагаю, что это должно быть что-то вроде:

ReactDOM.render(
    <Router>
      <Route path="/" component={App2}>
        <IndexRoute components={{main: Home, sidebar: HomeSidebar}}/>
        <Route path="some/other/path" components={{main: Home, sidebar: SomeOtherSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);

Ответ 5

Надеюсь, вы знаете, что используете action-router 1.0.x, и он довольно устарел. Текущая версия - 4.x.

Ниже код работает отлично (на основе вашего примера).

let Router = ReactRouter.Router;
let RouterContext = Router.RouterContext;
let Route = ReactRouter.Route;

class App2 extends React.Component {
  render () {
    const { main, sidebar } = this.props;
    return (
      <div>
        <div className="Main">
          {main}
        </div>
        <div className="Sidebar">
          {sidebar}
        </div>
      </div>
    )
  }
}


class Home extends React.Component {

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

}


class HomeSidebar extends React.Component {
  render() {
    return (
      <div>
        <p>I'm a sidebar</p>
      </div>

    );
  }
}


ReactDOM.render(
    <Router>
      <Route component={App2}>
        <Route path="/" components={{main: Home, sidebar: HomeSidebar}}/>
      </Route>
    </Router>,
  document.getElementById('content')
);
<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/1.0.3/ReactRouter.min.js"></script>

<div id="content"></div>