react 嵌套路由配置

1、在src下建立router/router.js

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

// 引入页面组件
import App from "../page/App/app"
import Home from "../page/Home/home";
import New from "../page/New/new";

const MyRouter = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />}>
          <Route index element={<Home />}></Route>
          <Route path="/new/:id" element={<New />}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default MyRouter

2、src 文件夹下建立page/App/app.js文件

import React from "react"
import { Link, Outlet } from "react-router-dom"

const App = () => {
  return (
    <div className="app">
      <ul>
        <li><Link to={"/"}>首页</Link ></li>
        <li><Link to={"/new"}>新闻</Link ></li>
      </ul>
      <Outlet />
    </div>
  )
}

export default App

3、src 文件夹下建立page/Home/home.js文件

import React from "react";

function Home() {
    return (
        <div className="home">这是首页内容</div>
    )
}

export default Home

4、src 文件夹下建立page/New/new.js文件

import React from 'react'

const New = () => {
  return (
    <div className='new'>这是新闻页面</div>
  )
}

export default New

5、App.js

import React from 'react';
import MyRouter from './router/router';

class App extends React.Component {
  render() {
    return (
      <MyRouter />
    )
  }
}

export default App;