use la ruta anidada React, Home es el padre y News es el hijo. en el directorio raíz, hay una carpeta "src", en "src", está la carpeta "pages", en "pages", están las carpetas "Home" y "News". En "Noticias", hay index.js:
Estructura de directorios :
| src/ | -- pages/ | ----- Home/ | --------index.js | ----- News/ | --------index.js | -- App.js News/index.js
import React from 'react' export default class News extends React.Component { render(){ return( <div style={{backgroundColor:'green',padding:10}}> this is content of child subcomponent </div> ) } } 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}}> home <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'>home</Link></li> <li><Link to='/citylist'>citylist</Link></li> </ul> <Routes> <Route path='/home' element={<Home/>}/> <Route path='/citylist' element = {<CityList/>}/> </Routes> </div> </Router> ); } export default App; cuando el programa se ejecuta, ya que el sitio web es http://localhost:3000/home , está bien, pero cuando agrego noticias después del sitio web, http://localhost:3000/home/news , el componente secundario no tiene se ha mostrado correctamente, no se muestra "este es el contenido del subcomponente secundario", ¿podría decirme por qué y cómo resolverlo?
Supongo que probablemente esté utilizando el enrutador de reacción 6. En ese caso, debe usar Outlet para generar rutas secundarias anidadas.
import React from "react"; import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom"; import "./styles.css"; function News() { return ( <div style={{ backgroundColor: "green", padding: 10 }}> this is content of child subcomponent </div> ); } function Home() { return ( <div style={{ backgroundColor: "skyblue", padding: 10 }}> home { // Render child route. } <Outlet /> </div> ); } function CityList() { return ( <div> <p>City list</p> </div> ); } export default function App() { return ( <BrowserRouter> <div className="App"> <ul> <li> <Link to="/home">home</Link> </li> <li> <Link to="/citylist">citylist</Link> </li> </ul> <Routes> <Route path="/home" element={<Home />}> { // Nested Child Route. } <Route path="news" element={<News />} /> </Route> <Route path="/citylist" element={<CityList />} /> </Routes> </div> </BrowserRouter> ); }