单击反应中的链接列表时如何显示 html 文件？

Question

我正在尝试创建一个博客网站作为学习实践曲线。我为列表中的每个 html 文件提供了一个本地文件路径名。我使用地图创建链接列表。当我点击创建的链接列表时，这些链接被破坏并重定向到主页。如何解决这部分问题？

这里是Blog.js

const BlogPath = ["./blog/blog1.js", "./blog/blog1.js", "./blog/blog1.js","./blog/blog1.js"];

BlogPath.map((Path, index) => 
      <div key={index}>
         <Link to={/Path}>{Path}</Link>
      </div>
)

这里是App.js

function App() {

  return (
    <HashRouter >
      <ScrollToTop />
      <div className="App">
        <Navigation/>
        <Routes>
          <Route exact path="/" element={ <Home /> }/>
          <Route exact path="/blogList" element={<Blog />}/>
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </div>

    </HashRouter>
  );
}

我在 App.js

中导入了主页和博客页面

import Home from './Home.js';
import About from './Blog.js';

这里是Navigation.js

   <>
      <Navbar collapseOnSelect sticky='top' expand='sm' variant='dark' className='background color '>
        <Container >
          <Navbar.Toggle aria-controls='responsive-navbar-nav' />
          <Navbar.Collapse className='mobile-nav' id='responsive-navbar-nav'>
          <Nav className='me-auto'>
              <Nav.Link as={NavLink} to="/" >Home</Nav.Link>
            </Nav>
            <Nav>
              <Nav.Link as={NavLink} to="/blogList" >Blog</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>

示例如下：link 粗体

Answer 1

更新 BlogList 组件以呈现更多 reader/user-friendly 路径。

function BlogList() {
  const BlogPath = ["blog1", "blog2", "blog1", "blog2", "blog3-4-5"];

  return (
    <>
      {BlogPath.map((path, index) => (
        <div key={index}>
          <Link to={path}>{path}</Link>
        </div>
      ))}
    </>
  );
}

这将构建相对路径，即 "/blogList/blog1"

向 App 添加路由以匹配并呈现此路径：

function App() {
  return (
    <HashRouter>
      <div className="App background">
        <Navigation />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blogList" element={<Bloglist />} />
          <Route path="/blogList/:blog" element={<Blog />} /> // <--

          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </div>
    </HashRouter>
  );
}

创建一个 Blog 组件来读取 blog 路由路径参数，以便它可以 dynamically/lazily 加载匹配的博客文件：

const Blog = () => {
  const { blog } = useParams();

  const [BlogItem, setBlogItem] = React.useState();

  React.useEffect(() => {
    const BlogItem = React.lazy(() => import(`./blog/${blog}.js`));
    setBlogItem(BlogItem);
  }, [blog]);

  return (
    <>
      <h1>Blog</h1>
      {BlogItem && <BlogItem />}
    </>
  );
};

单击反应中的链接列表时如何显示 html 文件？

how to display html file when clicks on list of links in react?

reactjs

react-router

react-router-dom