react-router-dom动态渲染路由

最新推荐文章于 2024-07-04 16:37:43 发布

I-T枭

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量2.5k

点赞数 2

分类专栏： ES6 React

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/104700860

版权

本文档介绍了如何在React应用中使用react-router-dom进行动态路由配置，详细讲解了module.js、routes.js和App.js中的关键实现，并提供了官方文档链接以获取更多详细信息。注意动态路径的设置规则和组件渲染方式。

摘要由CSDN通过智能技术生成

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
    },