react6路由配置写法于react5有很大不同,这里来记录一下,防止遗忘

重点:根路由路径要写  path='/Home/*' ,否则会提示找不到路径

正确 <Route path='/Home/*' element={<Home />} />  

错误 <Route path='/Home' element={<Home />} />  

效果

目录结构

代码

App.js

import {Button} from "antd-mobile"
import {BrowserRouter as Router,Routes,Route,Link} from "react-router-dom"
import CityList from "./pages/CityList/index"
import Home from "./pages/Home/index"
import News from "./pages/News/index"


function App() {
  return (

      <Router>
      <div className="App">
         <h1>React 基础路由</h1>
         <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;

 /Home/index.js

import React from "react";
import News from "../News/index"
import {BrowserRouter as Router ,Routes,Route, Link} from "react-router-dom"

export default class Home extends React.Component{
    render(){
        return(
            
                   <div>
                        home页面
                        <Link to="./News">新闻</Link>
                        <Routes>
                            <Route path="/News"  element={<News />} /> 
                        </Routes>
                            
                 </div>
              
    
            
            )
    }
}

 /News/index.js

import React from "react";
import {BrowserRouter as Router ,Routes,Route, Link} from "react-router-dom"


export default class News extends React.Component{
    render(){
        return (
         
            <div className="App">
                 news页面
             </div>
           
        )
    } 
}