React配置路由-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57157114/article/details/120068328

本文详细介绍了如何使用create-react-app创建React项目，并配置react-router-dom实现路由管理。通过创建Index.js和List.js组件，以及定义routes文件夹，展示了如何设置基本的页面跳转和链接。适合初学者理解React应用的导航结构。

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

如果创建好文件可以直接跳过
注:图片下面有代码
新建文件

npm install -g create-react-app

create-react-app '项目名称'

创建好文件的直接从这一步开始

npm install react-router-dom react-router-config -S

在scr的index.js中引入下面的

import {HashRouter as Router} from 'react-router-dom'

在这里插入图片描述
替换成

然后新建view文件夹并且创建两个文件Index.js和List.js 在上面写上以下内容

import { Component } from "react";
class List extends Component{
    render(){
        return (<div>this is List</div>)
    }
}
export default List;

这个文件也一样写
在这里插入图片描述

import { Component } from "react";
class Home extends Component{
    render(){
        return (<div>this is Home</div>)
    }
}
export default Home;

新建routes文件夹再新建index.js文件写上以下内容
在这里插入图片描述

import Index from '../views/Index'
import List from '../views/List'
const Routes = [
    {path:"/",exact:true,component:Index},
    {path:"/list",exact:true,component:List}
]
export default Routes

app.js中引入并添加
在这里插入图片描述

import {Link} from 'react-router-dom'
import {renderRoutes} from 'react-router-config'
import routes from './routes'
function App() {
  return (
    <div className="App">
      <div>
        <Link to="/">这是首页</Link>
        <Link to="/list">这是列表页</Link>
      </div>
      <div>
        {renderRoutes(routes)}
      </div>
    </div>
  );
}

export default App;

```xml
npm start