reactjs sidebar with react-router

Question

私は反応するのが新しく、reactjsでサイドナビゲーションバーを作成し、それと反応ルータを使用する方法の例を見つけようとしています。今、私はこのようになります「側NAV」ペインがあります。

import React, {PropTypes} from 'react'; 
import { Link, IndexLink } from 'react-router'; 

const Header =() => { 
    return (
     <nav> 
      <div> 
       <ul> 
        <li> 
         <IndexLink to="/" activeClassName="active">Home</IndexLink> 
        </li> 
        <li> 
         <Link to="/courses" activeClassName="active">Courses</Link> 
        </li> 
        <li> 
         <Link to="/about" activeClassName="active">About</Link> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    ); 
}; 

export default Header; 

を私はサイドナビゲーションバーにそのをオンにしたいが、操作方法の一例とオンライン何かを見つけるように見えることはできませんそれ。

------- EDIT --------

だから私はこれを試してみましたが、まだ運...

app.jsは次のようになりません：

// This component handles the App template used on every page. 
import React, {PropTypes} from 'react'; 
import SideBar from './common/Header'; 

class App extends React.Component { 
    render() { 
     return (
      <div className="container-fluid"> 
         <SideBar /> 
         {this.props.children} 
      </div> 
     ); 
    } 
} 

App.propTypes = { 
    children: PropTypes.object.isRequired 
}; 

export default App; 

サイドバーのコンポーネントは：

import React, {PropTypes} from 'react'; 
import { Link, IndexLink } from 'react-router'; 

const SideBar =() => { 
    return (
     <nav> 
      <div> 
       <ul> 
        <li> 
         <IndexLink to="/" activeClassName="active">Home</IndexLink> 
        </li> 
        <li> 
         <Link to="/courses" activeClassName="active">Courses</Link> 
        </li> 
        <li> 
         <Link to="/about" activeClassName="active">About</Link> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    ); 
}; 

export default SideBar; 

style.cssには、次のようになります。

#app { 
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #4d4d4d; 
    min-width: 550px; 
    max-width: 850px; 
    margin: 0 auto; 
} 

a.active { 
    color: orange; 
} 

nav { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

.container { 
    display: flex; 

    > * { height: 100%; } 

    .sidebar { 
     width: 250px; 
    } 

    .content { 
     width: 100%; 
    } 
} 

Answer 1

これは、リアクションの問題よりもCSSの問題です。正しいCSSでサイドバーを作ることができます。それは、リアクションでもこれを設定する良い方法があるので、私はあなたにそれを示します。

私は次のようなものをお勧めします。

ルータは次のように構造化することになります。

<Route path="/" component={WrapperComponent}/> 
    <Route path="/somepath" component={SomeComponent}/> 
    ... 
</Route> 

WrapperComponentはあなたのSideBarクラスを使用すると、上記の持っているもののように、多かれ少なかれ見える（しかし、名前が変更され、ためでしょう

class WrapperComponent extends React.Component { 
    render() { 
     return (
      <div> 
       <SideBar props... /> 
       { this.props.children } 
      </div> 
     ) 
    } 
} 

ようになります。それは重要です;））

これは自動的に現在のビューを内側に置きますWrapperComponentここで、{ this.props.children }は、サイドバーの横にあります（スタイリングが正しく設定されていることを前提とします）。この例では、/somethingに移動すると、左側にサイドバーが表示され、右側にSomeComponentが表示されます。スタイルの場合

、

.container { 
    display: flex; 
} 

.container > * { height: 100%; } 

.container .sidebar { 
    width: 250px; 
} 

.container .content { 
    width: 100%; 
} 

のようなものは、あなたが近くになるだろう。

編集は、あなたが使っているコードで間違ったカップルの事がある - あなたは私の更新スタイルをコピー＆ペースト/場合でも：あなたは私のスタイルが使用代わりに.containerの.container-fluidを、使用している

1. を。ブートストラップを使用している場合は、ブートストラップカラム（サイドバーにはcol-md-3、コンテンツにはcol-md-9）を使用するか、コンテナ名に.container(-fluid)以外のものを使用してブートストラップの衝突を避けてください。
2. SideBarスタイルを適用する場合は、className（.sidebar）が必要です。SideBarはコンポーネントクラスにすぎず、HTMLクラス名には影響しません。それが容易ならば.sidebarをnavに変更することができます。
3. .contentで何かをラップするか、そのクラスがレンダリングされていることを確認してください。これは潜在的な要素にclassNameの支柱を受け入れることによって達成できます。
4. 何かを作るのは楽しいですが、自分が行っていることを理解する必要があります。それが何を意味するのか/それが何をしているのかを最初に理解することなく、ここからあなたのコードベースに何かをコピー/ペーストするだけであなたの時間を無駄にしています。