Question

我有一个构建路由的任务，它维护两种类型的组件：侧边栏和内容。如果网址包含category-:type，我必须呈现补充工具栏组件，如果网址包含profile，about或seller等任何内容类型，则必须呈现正确的内容。
如果为侧边栏和内容类型的每种组合创建<Route />，则会有很多项目如何为此目的构建路由？据我所知，我不能使用<Route path="/**/:profile" component={Profile}>之类的路由，因为如果路由器匹配此路径，它将停止并避免其他比较。

这是我当前的路由

const history = syncHistoryWithStore(browserHistory, routing);
ReactDOM.render(
   <Router history={history}>
      <Route path="/" component={Base}>
         <IndexRedirect to="signin" />
         <Route path="n=:id/:title" component={Item} />
         <Route path="search(/:type)" component={require_auth(Search)} />
         <Route path="people(/:type)" component={require_auth(People_Layout)} />
         <Route path="person/:id" component={require_auth(Person_Scene_Layout)} />
         <Route path="signin" component={Signin} />
         <Route path="signup" component={Signup} />
         <Route path="profile" component={require_auth(Profile)} />
      </Route>
   </Router>
   , document.querySelector('#appRoot')
);

因此，我必须扩展此代码以允许同时在侧边栏上导航。我需要保留当前路由并为匹配的补充工具栏添加路由，例如<Route path="category-:type/n=:id/:title" component={Item} />。此路由可以呈现<Sidebar/>和<Item/>组件，但为了使其与所有其他路由一起工作，我必须将几乎所有现有路由加倍。

Answer 1

所以，如果我正确理解你的问题，你需要渲染组件动态地基于Router Params，如

导航组件 - 部分侧栏导航
内容组件 - 个人资料，关于，卖家等。

因此，您无法直接过滤路由器中的组件和注入。但你可以做的基本上是

使用路径=＆＃34; / *＆＃34;
并在父组件内部，通过

this.props.location.query.yourParamName

并在此基础上，为您注入子组件，即导航或内容。

<Router history={hashHistory} >
     <Route path="/*" component='ParentComponent'/>      
</Router>


export default class CartItem extends React.Component {
    render() {
        // check for Router Params and decide the Child Componenton on fly using any conditional statement.
        // var Component = this.props.location.query.yourParamName
        return (
            <div className='parent-wrapper'>
               React.createElement(Component, props, ...children)
            </div>
        );
    }
}

在react-router或模糊路由中进行多次匹配

1 个答案: