react-router-dom学习心得2.0

最新推荐文章于 2025-07-16 11:05:10 发布

不科学的年轻人

最新推荐文章于 2025-07-16 11:05:10 发布

阅读量314

点赞数

分类专栏： react

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用React和react-router-dom实现的基本路由配置案例，包括组件的定义、路由的设置及导航链接的创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说路由都是要提取出来，是结构清晰

文件目录如下【注意以下文件均在src目录下】

components>about>index.js

import React,{Component} from "react";

class About extends Component{
    render(){
        return(
            <h1>this is About!</h1>
        )
    }
}

export default About

components>home>index.js

import React,{Component} from "react";

class Home extends Component{
    render(){
        return(
            <h1>this is Home!</h1>
        )
    }
}

export default Home

components>topic>index.js

import React,{Component} from "react";

class Topic extends Component{
    render(){
        return(
            <h1>this is Topic!</h1>
        )
    }
}

export default Topic

config>router.js

import React,{Component} from "react";
import {BrowserRouter,Route,Link,Switch,Redirect} from "react-router-dom";


import Topic from "../components/topic/index"
import Home from "../components/home/index"
import About from "../components/about/index"


export default ()=>{
    return [
        <Route path="/" component={Home} exact></Route>,
        <Route path="/home" component={Home}></Route>,
        <Route path="/about" component={About}></Route>,
        <Route path="/topic" component={Topic}></Route>
    ]
}

index.js

import React,{Component} from "react";
import {render} from "react-dom";
import {Link,BrowserRouter} from"react-router-dom"
import Routers from "./config/router"

class App extends Component{

    render(){
        return (
            <BrowserRouter>
                <div>
                    <ul>
                        <li><Link to="/home">HOME</Link></li>
                        <li><Link to="/about">ABOUT</Link></li>
                        <li><Link to="/topic">TOPIC</Link></li>
                    </ul>


                        <Routers/>


                </div>

            </BrowserRouter>

        )
    }
}

render(<App />,document.getElementById("root"));