时间戳

首页 > 解决方案 > 反应路由器，链接到新网页

javascript - 反应路由器，链接到新网页

问题描述

基本上，我正在尝试重做我的网站，在此过程中，我正在尝试尽可能地自动化，因此如果我需要添加信息，我只需要更改一个文件。

我面临的困境如下，在我的 App.js 中，我编写了以下代码：

function App() {
  return (
    <div>
      <Router>
        <div className="Header">
          <Header />
          <div className="content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/work">
                <Work />
              </Route>
              <Route path="/contact">
                <Contact />
              </Route>
              <Route path="/redo">
                <KTH />
              </Route>
              <Route path="/kth">
                <KTH />
              </Route>
              <Route path="/codecademy">
                <Codecademy />
              </Route>
            </Switch>
          </div>
        </div>
      </Router>

      <Footer />
    </div>
  );
}

我面临的问题是，在一个名为“工作”的组件中，我希望它链接到我有时创建的网站以及其他情况下的其他组件。负责此操作的函数如下所示：

function itemContent() {
  const workedItems = Object.values(worked);

  return (
    <div>
    {workedItems.map(item =>
      <div className="item">
          <div className="itemPic">
            <Link to={item.path}><img src={item.picture} alt={item.alt} /></Link>
          </div>
          <div className="itemInfo">
            <div className="itemInfoLeft">
              <p>{item.title}</p>
              <p>{item.intro}</p>
            </div>
            <div className="itemInfoRight">
              <p>{item.source}</p>
              <p>{item.date}</p>
            </div>
          </div>
        </div>
      )}
      </div>
  )
};

有没有办法让我的 react-router 像标签一样自动转到新网页？

标签： javascriptreactjsreact-router

解决方案

我误解了这个问题，但如果您只是希望您的应用程序链接到其他网站，只需使用 HTML 锚标记：<a href="http://myawesomeworkproject.com">.

您只需要在 workingItems 上有一个标识符来检查是呈现<a>标签还是<Link>

推荐阅读