react中的链接路由会更改链接，但页面内容没有任何变化

Question

我正试图使用react制作一个导航栏，但尽管链接已经更改，但内容从未更改！

我的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文件；主页"；没有出现，尽管链接已更改：

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>
);

使用引导程序的NavbarNavbar.js代码：

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;

布局.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(也称为JSX(的单个element道具。

路线

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;
}