blocks|key|120262|text|在您的示例中，不清楚应该为/test+url呈现哪个组件？我认为它是property密钥的值，对吗？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|120263|第一个选项|120264|你可以这样做：|120265|<Route+path="/:page"+component={Page}/>|code-block|syntax|javascript|120266|它将允许您为每个url呈现Page组件，该组件从/开始，并且此组件将在this.props.routeParams.page中包含页面url。它允许您在Page#render中找到所需的组件|120267|render()+{
++const+url+=+this.props.routeParams.page;
++const+PageComponent+=+data.find(page+=>+page.link+===+url).property;
++render+<PageComponent+/>;
}|120268|第二个选项|120269|您可以动态生成路由，但我不确定它是否有效(您可以检查它)。您只需替换此部件：|120270|<Route+path="about"+component={About}/>
<Route+path="login"+component={Login}/>
<Route+path="survey"+component={Survey}/>
<Route+path="widgets"+component={Widgets}/>|120271|使用|120272|+data.map(page+=>+<Route+path={page.link}+component={page.property}+key={page.id}/>)|120273|entityMap^0|D|5|Y|8|0|0|0|0|D|4|O|1|Z|R|24|B|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1M|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1N|8|@]|D|@]|E|$]]|$1|W|3|X|5|L|7|1O|8|@]|D|@]|E|$M|N]]|$1|Y|3|Z|5|6|7|1P|8|@]|D|@]|E|$]]|$1|10|3|11|5|L|7|1Q|8|@]|D|@]|E|$M|N]]|$1|12|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|13|$]]

It is not clear from your example which component should be rendered for <code>/test</code> url? I suppose it is value of <code>property</code> key, right?

<h3>First option</h3>

You can do is something like this:

<pre><code>&lt;Route path="/:page" component={Page}/&gt;
</code></pre>

It will allow you to render <code>Page</code> component for each url, that starts from <code>/</code> and this component will have page url inside <code>this.props.routeParams.page</code>. It allows you to find needed component inside <code>Page#render</code>:

<pre><code>render() {
 const url = this.props.routeParams.page;
 const PageComponent = data.find(page =&gt; page.link === url).property;
 render &lt;PageComponent /&gt;;
}
</code></pre>

<h3>Second option</h3>

You can generate Routes dynamically, but I'm not sure if it works (you can check it). You just should replace this part:

<pre><code>&lt;Route path="about" component={About}/&gt;
&lt;Route path="login" component={Login}/&gt;
&lt;Route path="survey" component={Survey}/&gt;
&lt;Route path="widgets" component={Widgets}/&gt;
</code></pre>

with 

<pre><code> data.map(page =&gt; &lt;Route path={page.link} component={page.property} key={page.id}/&gt;)
</code></pre>

blocks|key|2670313|text|第三个选项：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2670314|Follow+the+react-router+example+'huge-apps'+for+dynamically+loading+routes.|2670315|项目结构为管线和组件提供了逻辑层次结构。他们的方法还使用webpack加载具有页面特定捆绑代码的共享捆绑包。该项目有一个routes文件夹。在该示例中，层次结构的动态部分派生自stubs文件夹中的数据，该文件夹可以更改为使用另一个数据源。这种方法是有效的。|2670316|%7C____Calendar
%7C+%7C____components
%7C+%7C+%7C____Calendar.js
%7C+%7C____index.js
%7C____Course
%7C+%7C____components
%7C+%7C+%7C____Course.js
%7C+%7C+%7C____Dashboard.js
%7C+%7C+%7C____Nav.js
%7C+%7C____index.js
%7C+%7C____routes
%7C+%7C+%7C____Announcements
%7C+%7C+%7C+%7C____components
%7C+%7C+%7C+%7C+%7C____Announcements.js
%7C+%7C+%7C+%7C+%7C____Sidebar.js
%7C+%7C+%7C+%7C____index.js
%7C+%7C+%7C+%7C____routes
%7C+%7C+%7C+%7C+%7C____Announcement
%7C+%7C+%7C+%7C+%7C+%7C____components
%7C+%7C+%7C+%7C+%7C+%7C+%7C____Announcement.js
%7C+%7C+%7C+%7C+%7C+%7C____index.js
%7C+%7C+%7C____Assignments
%7C+%7C+%7C+%7C____components
%7C+%7C+%7C+%7C+%7C____Assignments.js
%7C+%7C+%7C+%7C+%7C____Sidebar.js
%7C+%7C+%7C+%7C____index.js
%7C+%7C+%7C+%7C____routes
%7C+%7C+%7C+%7C+%7C____Assignment
%7C+%7C+%7C+%7C+%7C+%7C____components
%7C+%7C+%7C+%7C+%7C+%7C+%7C____Assignment.js
%7C+%7C+%7C+%7C+%7C+%7C____index.js
%7C+%7C+%7C____Grades
%7C+%7C+%7C+%7C____components
%7C+%7C+%7C+%7C+%7C____Grades.js
%7C+%7C+%7C+%7C____index.js
%7C____Grades
%7C+%7C____components
%7C+%7C+%7C____Grades.js
%7C+%7C____index.js
%7C____Messages
%7C+%7C____components
%7C+%7C+%7C____Messages.js
%7C+%7C____index.js
%7C____Profile
%7C+%7C____components
%7C+%7C+%7C____Profile.js
%7C+%7C____index.js|code-block|syntax|javascript|2670317|2670318|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ReactTraining/react-router/tree/1.0.x/examples/huge-apps^0|0|6|0|0|23|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

I am currently working on a CMS based project.

For which i am using the universal react redux boilerplate by erikras

I really need suggestions on handling dynamic routing

Lets take a simple scenario form the boilerplate...

In routes.js

<pre><code>&lt;Route path="about" component={About}/&gt;
&lt;Route path="login" component={Login}/&gt;
&lt;Route path="survey" component={Survey}/&gt;
&lt;Route path="widgets" component={Widgets}/&gt;
</code></pre>

data.js

<pre><code>export const data = [
 {id: 1, property: 'Dashboard', link: '/'},
 {id: 2, property: 'Login', link: '/login'},
 {id: 3, property: 'About Us', link: '/About'},
];
</code></pre>

now, let say on the basis of user role, the properties in json data will change

let say new property: is

<pre><code>{id: 4, property: 'test page', link: '/test'}
</code></pre>

When react will render the components, how it would know the route link .. as it is not defined in the routes.js

I am not getting the right way to implement it

We need a sidebar made of specific menu content as per the user role .

Let say we are building a reservation system , there can be different user roles like admin, maintenance mode, assistant role
.

So different role will have different properties, accordingly we need to generate the menu on the basis it, as the properties will definitely differ as per user role.

Thanks!!

How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras

路由

我目前正在从事一个基于CMS的项目。为此，我使用了erikras的通用redux样板。我真的需要关于处理动态路由的建议让我们从样板中取一个简单的场景...在routes.js中<Route path="about" component={About}/><Route path="login" component={Lo...

问如何在routes.js中实现通用react redux模板中工具条菜单项的动态路由
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在routes.js中实现通用react redux模板中工具条菜单项的动态路由EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在routes.js中实现通用react redux模板中工具条菜单项的动态路由
EN