问题遇到的现象和发生背景
使用React,要实现嵌套路由,Home为父路由,News为子路由,
使用React,在项目根目录下有:src文件夹,在src中有pages文件夹,在pages中有News文件夹,下有index.js,代码为:
import React from 'react'
export default class News extends React.Component {
render(){
return(
<div style={{backgroundColor:'green',padding:10}}>
这是News组件的内容,它是子路由的内容
</div>
)
}
}
使用React,在项目根目录下有:src文件夹,在src中有pages文件夹,在pages中有Home文件夹,下有index.js,代码为:
import React from 'react'
import {BrowserRouter as Router,Route,Routes} from 'react-router-dom'
import News from '../News'
export default class Home extends React.Component {
render(){
return(
<div style={{backgroundColor:'skyblue',padding:10}}>
首页
<Routes>
<Route path = '/home/news' element={<News/>}></Route>
</Routes>
</div>
)
}
}
在src目录下有app.js,代码为:
import './App.css';
import {BrowserRouter as Router,Route,Link,Routes} from 'react-router-dom'
import {Button} from 'antd-mobile'
// 导入首页和城市选择两个组件(页面)
import Home from './pages/Home'
import CityList from './pages/CityList'
import React from 'react';
function App() {
return (
<Router>
<div className="App">
<ul>
<li><Link to='/home'>首页</Link></li>
<li><Link to='/citylist'>城市选择</Link></li>
</ul>
{/* 配置路由 */}
<Routes>
<Route path='/home' element={<Home/>}/>
<Route path='/citylist' element = {<CityList/>}/>
</Routes>
</div>
</Router>
);
}
export default App;
问题相关代码,请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
```bash
```bash
```c
```