react-router-dom动态渲染路由

- 日理万妓 2023-07-12 03:37 31阅读 0赞

module.js

import React from 'react';
    
    export function Home() {
        return <h2>Home</h2>;
    }
    
    export function About() {
        return <h2>About</h2>;
    }
    
    export function Users() {
        return <div><h2>
            Users</h2>
        </div>;
    }
    
    export function ErrorPage() {
        return <h1>404Code, GoAway</h1>
    }
    
    export function Hello() {
        return <h2>Hello</h2>;
    }
    
    export function Say() {
        return <h2>Say</h2>;
    }

routes.js

import { Home, About, Users, ErrorPage, Say, Hello, } from './module.js';
    const routes = [
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/users',
            component: Users
        },
        {
            path: '/error',
            component: ErrorPage
        },
        {
            path: '/say',
            component: Say
        },
        {
            path: '/hello',
            component: Hello
        },
    ];
    
    export default routes;

App.js

import React from 'react';
    import {
      BrowserRouter as Router,
      Switch,
      Route,
      Link,
      Redirect,
      useHistory
    } from "react-router-dom";
    import './App.css';
    import routes from './route/index.js';
    import { ErrorPage } from './route/module.js';
    
    // 主要代码
    function RouteWithSubRoutes(route) {
      console.log(route.path);
      return (
        <Route
          path={route.path}
          render={props => (
            <route.component {...props} routes={route.routes} />
          )}
        />
      );
    }
    
    // console.log('app.js', process.env);
    function App() {
    
      return (
        <Router forceRefresh={true}>
          <div>
            <nav>
              <ul>
                {
                  routes.map((item) => {
                    return <li key={item.path}>
                      <Link to={item.path} >{item.path || '/'}</Link>
                    </li>
                  })
                }
              </ul>
            </nav>
            <Switch>
              <Route exact path="/" render={() =>
                <Redirect to='/home'></Redirect>} />
              {
                routes.map((route, i) => {
                  return <RouteWithSubRoutes key={i} {...route} />
                })
              }
              <Route component={ErrorPage} />
            </Switch>
          </div>
        </Router>
      );
    }
    
    export default App;

具体细节看官方文档：[https://reacttraining.com/react-router/web/example/route-config][https_reacttraining.com_react-router_web_example_route-config]

注意：

1：动态路径 **path** 必须 **'/pathUrl'** 不能为 **'/'** 或 **'/非法字符'**

2：render=\{ (props) => \{  return <route.component \{...props\} /> \}\}

[https_reacttraining.com_react-router_web_example_route-config]: https://reacttraining.com/react-router/web/example/route-config