反応-ルータIが反応-ルータのサイドバーの例を使用しようとした

Question

理解サイドバーの例：これまで正常に動作しますhttps://reacttraining.com/react-router/web/example/sidebar

const routes = [ 
    { 
     path: '/', 
     exact: true, 
     sidebar:() => <div>home!</div>, 
     main:() => <h2>Home</h2> 
    }, 
    { 
     path: '/bubblegum', 
     sidebar:() => <div>bubblegum!</div>, 
     main:() => <App /> 
    }, 
    { 
     path: '/shoelaces', 
     sidebar:() => <div>shoelaces!</div>, 
     main:() => <Felix /> 
    }, 
    { 
     path: '/processes', 
     sidebar:() => <div>shoelaces!</div>, 
     main:() => <Processes /> 
    } 
] 

ReactDOM.render((
    <Router history={hashHistory}> 
     <div> 
      <div style={{display: 'flex'}}> 
       <div style={{ 
        padding: '10px', 
        width: '40%', 
        background: '#f0f0f0' 
       }}> 
        <ul style={{listStyleType: 'none', padding: 0}}> 
         <li><Link to="/">Homse</Link></li> 
         <li><Link to="/bubblegum">Bubblegum</Link></li> 
         <li><Link to="/shoelaces" activeClassName="active">Shoelaces</Link></li> 
         <li><Link to="/processes" activeStyle={{ color: 'red' }}>processbbes</Link></li> 
        </ul> 
        {routes.map((route, index) => (
         <Route 
          key={index} 
          path={route.path} 
          exact={route.exact} 
          component={route.sidebar} 
         /> 
        ))} 
       </div> 

       <div style={{flex: 1, padding: '10px'}}> 
        {routes.map((route, index) => (
         // Render more <Route>s with the same paths as 
         // above, but different components this time. 
         <Route 
          key={index} 
          path={route.path} 
          exact={route.exact} 
          component={route.main} 
         /> 
        ))} 
       </div> 
      </div> 
     </div> 
    </Router> 
), document.getElementById('root')) 

を。

しかし、サイドバーには表示されず、ページをリロードしないコンテナ内に追加ルートを定義するにはどうすればよいですか？

constルートを外部ファイルに配置するにはどうすればよいですか？

これは反応ルータを使用する実用的な方法ですか？

Answer 1

CommmonJSのようなもの、より具体的にはWebpackのようなコンパイラを使用している場合は、ルートconstを別のファイルに移動できます。

# /app/routes.js 
export default [ 
    { 
    path: '/', 
    exact: true, 
    sidebar:() => <div>home!</div>, 
    main:() => <h2>Home</h2> 
    }, 
    ... 
]{ 

# file above 
import routes from './routes' 

サイドバーに表示されない追加のルートは、ルートオブジェクトによってレンダリングされたコンポーネントで呼び出すことができます。この例では、そのパスに一致するルートオブジェクトがあることを確認してください。あなたはサイドバー上で強調表示されていないルート上にいるという問題にぶつかりますが、これはUIを混乱させる可能性があります。

これは反応ルータを使用する実用的な方法ですか？十分な柔軟性を発揮します。