首页 › React论坛 › react-router-config的使用

洛笙 發表於 2020-8-24 22:47:00

react-router-config的使用

<h2 id="react-router-config">react-router-config</h2>
<h3 id="介绍">介绍</h3>
<p>是一个辅助react-router的插件，主要是使用配置文件集中式管理路由。</p>
<pre><code class="language-javascript">import React from 'react'
import { Redirect } from 'react-router-dom'
import Home from '../application/Home';
import Recommend from '../application/Recommend';
import Singers from '../application/Singers';
import Rank from '../application/Rank';

export default [
    {
      path:"/",
      component:Home,
      routes:[
            {
                path:"/",
                exact:true,
                render:() =&gt; (
                  &lt;Redirect to={"/recommend"}/&gt;
                )
            },
            {
                path:"/recommend",
                component:Recommend,
            },
            {
                path:"/singers",
                component:Singers,
            },
            {
                path:"/rank",
                component:Rank,
            }
      ]
    }
]
</code></pre>
<h3 id="在appjs中渲染配置文件中的组件">在App.js中渲染配置文件中的组件</h3>
<p><strong>渲染配置文件中的组件，一次只能渲染配置文件中的一层，在上面的配置文件中即Home组件。</strong>renderRoutes(routes)函数会把routers作为props传入到Home组件中。</p>
<pre><code class="language-JavaScript">import React from 'react';

//style
import { IconStyle } from './assets/iconfont/iconfont';
import { GlobalStyle } from './style';
//router
import routes from './routes/index';
import {renderRoutes} from 'react-router-config'
import { HashRouter } from 'react-router-dom'
//redux
import { Provider } from 'react-redux'
import store from './store/index'


function App() {
return (
    &lt;Provider store={store}&gt;
      &lt;HashRouter&gt;
      &lt;GlobalStyle&gt;&lt;/GlobalStyle&gt;
      &lt;IconStyle&gt;&lt;/IconStyle&gt;
{/* renderRoutes(routes)会把routers作为props传入到Home组件中 */}
      {renderRoutes(routes)}
    &lt;/HashRouter&gt;
    &lt;/Provider&gt;
   
);
}

export default App;

</code></pre>
<p>在Home组件中使用相同的方法渲染它的子路由</p>
<pre><code class="language-JavaScript">import React from 'react'
import { renderRoutes } from "react-router-config";

import {
    Top,
    Tab,
    TabItem
} from './style'
import { NavLink } from 'react-router-dom'

const Home = (props) =&gt; {
    /*
    props: {
      history: ...,
      location: ...,
      match: ...,
      route: ...,
      staticContext: ...,
      其他自定义传入的属性: ...
    }
*/
    const { route } = props;
    return (
      &lt;div&gt;
            &lt;Top&gt;
                &lt;span className="iconfont menu"&gt;&amp;#xe65c;&lt;/span&gt;
                &lt;span className="title"&gt;WebApp&lt;/span&gt;
                &lt;span className="iconfont search"&gt;&amp;#xe62b;&lt;/span&gt;
            &lt;/Top&gt;
            &lt;Tab&gt;
                &lt;NavLink to="/recommend" activeClassName="selected"&gt;&lt;TabItem&gt;&lt;span &gt; 推荐 &lt;/span&gt;&lt;/TabItem&gt;&lt;/NavLink&gt;
                &lt;NavLink to="/singers" activeClassName="selected"&gt;&lt;TabItem&gt;&lt;span &gt; 歌手 &lt;/span&gt;&lt;/TabItem&gt;&lt;/NavLink&gt;
                &lt;NavLink to="/rank" activeClassName="selected"&gt;&lt;TabItem&gt;&lt;span &gt; 排行榜 &lt;/span&gt;&lt;/TabItem&gt;&lt;/NavLink&gt;
            &lt;/Tab&gt;
            {renderRoutes(route.routes)}
      &lt;/div&gt;
    )
}

export default React.memo(Home);

</code></pre><br><br>
来源：https://www.cnblogs.com/qingyuano/p/13556943.html

查看完整版本: react-router-config的使用