反應路由器側邊欄例如瞭解

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路徑放在外部文件中？

這是一種使用react-router的可行方式嗎？

Answer 1

你可以，如果你正在使用類似CommmonJS路線常量移動到另一個文件，或者更具體地說，像的WebPack的編譯器。在側邊欄中未顯示

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

# file above 
import routes from './routes' 

其他途徑可以通過任何路線的對象呈現的組件調用。在這個例子中，只要確保有一個匹配該路徑的路由對象。您會遇到在側欄上未突出顯示的路線問題，這可能會導致UI混淆。

這是一個使用反應路由器的實用方法嗎？似乎足夠靈活。