Question

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

我面临的困境如下，在我的 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>
  );
}

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

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 像标签一样自动转到一个新网页？

Answer 1

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

您只需要 workItems 上的标识符来检查是否呈现 <a> 标记或 <Link>

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

1 个答案: