Link React 中的路由更改了 link 但页面内容没有任何变化

Question

我正在尝试使用 React 制作导航栏，但尽管 link 已更改，但内容从未更改！

我的 App.js 路线：

import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

const App = () => (
  <Router>
    <Layout>
      <Routes>
        <Route exact path = '/' component = {Home} />
        <Route exact path = '/blog' component = {Blog} />
        <Route exact path = '/category/:id' component = {Category} />
        <Route exact path = '/blog/:id' component = {BlogDetail} />
      </Routes>
    </Layout>
  </Router>
);

export default App ;

Home.js 文件，尽管 link 已更改：

，但内容“Home”未出现

import React from "react";

const Home = () => (
    <>
    <div>
        Home
    </div> 
    </>
);

export default Home;

Blog.js 文件的内容也没有出现“与 Homel.js 相同”：

import React from "react";

const Blog = () => (
    <div>
        blog
    </div>
);

导航栏代码 Navbar.js 使用 bootstrap :

import React from "react";
import {Link, NavLink} from 'react-router-dom';

const Navbar = () => (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
    <div className="container-fluid">
        <Link className="navbar-brand" to="/">Around the world </Link>
        <button className="navbar-toggler"
        type="button"
        data-bs-toggle="collapse" 
        data-bs-target="#navbarNav" 
        aria-controls="navbarNav" 
        aria-expanded="false" 
        aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
            <li className="nav-item">
                <NavLink className="nav-link active" aria-current="page" exact to = '/'>home</NavLink>
            </li>
            <li className="nav-item">
                <NavLink className="nav-link" exact to = '/blog'>Blog</NavLink>
            </li>
            </ul>
        </div>
        </div>
    </nav>
    
</div>
);

export default Navbar;

Layout.js:

import React from "react";
import Navbar from '../components/Navbar';

const Layout = (props) => (
    <div>
        <Navbar />
        {props.children}
    </div>
);

export default Layout;

Answer 1

没有渲染任何内容，因为您没有正确使用 Route 组件的 element 属性来渲染路由组件。在 react-router-dom@6 中，component 和 render 以及 children 渲染函数道具消失了，取而代之的是采用 ReactElement、a.k.a。 JSX.

Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null; // <-- routed component
  index?: boolean;
  path?: string;
}

const App = () => (
  <Router>
    <Layout>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/blog' element={<Blog />} />
        <Route path='/category/:id' element={<Category />} />
        <Route path='/blog/:id' element={<BlogDetail />} />
      </Routes>
    </Layout>
  </Router>
);

Link React 中的路由更改了 link 但页面内容没有任何变化

Link routes in react changes the link but nothing is changing in the content of the page

javascript

navbar

reactjs

react-router

react-router-dom