react-router侧边栏示例理解

Question

我尝试使用react-router侧边栏示例： 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之类的编译器，则可以将路由const移到另一个文件。

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

# file above
import routes from './routes'

侧边栏中未显示的其他路由可以在任何路由对象渲染的组件中调用。 在此示例中，只需确保具有与该路径匹配的路由对象。 您会遇到一条问题，即该路线未在侧边栏上突出显示，这可能会使UI混乱。

这是使用React Router的实用方法吗？ 似乎足够灵活。