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移动到另一个文件。

  schema "roles" do
    field :name, :string
    field :internal, :boolean
    many_to_many :user_organizations, User.Models.UserOrganization, join_through: "roles_users_organizations"
    many_to_many :sessions, User.Models.Session, join_through: "roles_sessions"

    timestamps()
  end

可以在由任何路径对象呈现的组件中调用侧栏中未显示的其他路径。在此示例中，只需确保具有与该路径匹配的路由对象。您可能会遇到在边栏上未突出显示的路线问题，这可能会导致用户界面混乱。

这是使用反应路由器的实用方法吗？似乎足够灵活。

react-router sidebar示例理解

1 个答案: