配置React路由指南-CSDN博客

本文链接：https://blog.csdn.net/weixin_57156748/article/details/120119924

这篇博客介绍了如何在React项目中配置路由。首先从新建文件开始，接着在src/index.js中引入必要的组件，然后创建view文件夹及Index.js和List.js两个组件文件。在routes文件夹下创建index.js来定义路由，并在app.js中引入这些路由。最后，展示了运行后的效果。

摘要生成于 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

运行之后的效果图