Javascript 如何使用React路由器正确链接组件？

我正在使用React和React路由器尝试将我的组件链接到一个项目中。我想从主页（当前组件）链接一张图片到另一个组件

目前我可以点击图片，它有点像一个链接（有时点击后会变成蓝色），尽管它没有链接到其他组件，没有显示错误，url栏中也没有任何更改。实际上什么也没发生

有什么想法吗？这是我的密码：

import { HashRouter as Router, Route,} from 'react-router-dom';


import Header from './Header'
import PortfolioWorkPage from './Pages/PortfolioWorkPage';


class Home extends React.Component {




  render () {
    return (
      <Router>
      <Header />
      <h1>PORTFOLIO</h1>
      <div className="portfolioPic">
            <img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'></img>
      <Route path='Portfolio' component={PortfolioWorkPage} />
      </div>
      </Router>

    )
  }
}

export default Home

从'react Router dom'导入{HashRouter as Router，Route，}；
从“./头”导入头
从“./Pages/PortfolioWorkPage”导入PortfolioWorkPage；
类Home扩展了React.Component{
渲染（）{
返回(
文件夹
)
}
}
导出默认主页

错误代码：react dom.development.js:17117上述错误发生在组件中：在img（由Home创建）在div（由Home创建）在路由器（由HashRouter创建）在HashRouter（由Home创建）在HashRouter（由App创建）在App中在路由器（由HashRouter创建）在HashRouter（由App创建）中

从'react Router dom'导入{HashRouter as Router，Route，Link}；
从“./头”导入头
从“./Pages/PortfolioWorkPage”导入PortfolioWorkPage；
类Home扩展了React.Component{
渲染（）{
返回(
文件夹
)
}
}
导出默认主页

您可以使用react路由器提供的

链接

或

导航链接

组件

import { Link } from 'react-router-dom';

<Link to="/some-url"/>

从'react router dom'导入{Link}；

---

在注释之后，下面是两个使用内部状态和路由的实现。第一个路径是

mywebsite.com

，第二个路径是

mywebsite.com/portfolio

。在这两种情况下，图像都将保留在页面上-实际上您并没有被传输到新页面，您只是根据路径有选择地呈现组件集

使用内部状态：

class Home extends React.Component {

  constructor(props){
    super(props)
    this.state = {
     portfolioActive: false
    }
  }

  handleClick = () => {
    this.setState({portfolioActive: !this.state.portfolioActive})
  }

  render () {
    return (
      <>
      <h1>PORTFOLIO</h1>
      <div className="portfolioPic">
        <img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic' 
         onClick={this.handleClick}/>
      </div>
      {this.state.portfolioActive ? <PortfolioWorkPage/> : null}
      </>
    )
  }
}

export default Home

class Home扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
portfolioActive:错误
}
}
handleClick=（）=>{
this.setState（{portfolioActive:！this.state.portfolioActive}）
}
渲染（）{
返回(
文件夹
{this.state.portfolioActive？：null}
)
}
}
导出默认主页

使用路线：

import { HashRouter as Router, Route, Link} from 'react-router-dom';

class Home extends React.Component {

  render () {
    return (
      <Router>
        <h1>PORTFOLIO</h1>
        <div className="portfolioPic">
          <Link to="/portfolio">
            <img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'/>
          </Link>
        </div>
        <Route exact path="/portfolio">
          <PortfolioWorkPage />
        </Route>
      </Router>
    )
  }
}

export default Home

从'react Router dom'导入{HashRouter as Router，Route，Link}；
类Home扩展了React.Component{
渲染（）{
返回(
文件夹
)
}
}
导出默认主页

这可以链接到组件而不是url页面吗？不使用

链接

或

导航链接

。但是，可以根据url设置要呈现的组件。请参阅更新的答案我现在收到这个错误，当我这样做，并在一个img标记中包装路由：react dom.development.js:17117上述错误发生在组件中：在img中（由Home创建）在div中（由Home创建）在路由器中（由HashRouter创建）在HashRouter中（由Home创建）在Home中（由App创建）在Router中HashRouter中的（由HashRouter创建）（由应用程序创建）在Appupdated code on question向您展示了我所做的事情。Img标记是自动关闭的，您不能用它们包装另一个元素。这两个标记都不起作用。portfolioActive提供的第一个标记没有定义，我看不到任何内容。第二个标记绑定正确，尽管单击图片时不会发生任何事情。抱歉，它应该是is.state.portfolioActive，我已更新了第一个。我现在将查看第二个，但它应该是有效的。不，第一个仍然不起作用。它现在与底部的完全相同。捆绑正确，但单击时未链接到组件。我对第一个进行了小调整

const handleClick

应该是

handleClick

-这两个选项现在都可以在我的机器上使用简单的组件，因此我只能假设这与您的配置或

PortfolioWorkPage

的内容有关，使其无效。是的，对于react，它不接受常量，因此我也将其删除，并且仍然没有链接。它可能吧！如果你想看的话，我可以把git回购链接到你的网站上？但不确定是什么导致了这个问题。

class Home extends React.Component {

  constructor(props){
    super(props)
    this.state = {
     portfolioActive: false
    }
  }

  handleClick = () => {
    this.setState({portfolioActive: !this.state.portfolioActive})
  }

  render () {
    return (
      <>
      <h1>PORTFOLIO</h1>
      <div className="portfolioPic">
        <img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic' 
         onClick={this.handleClick}/>
      </div>
      {this.state.portfolioActive ? <PortfolioWorkPage/> : null}
      </>
    )
  }
}

export default Home

import { HashRouter as Router, Route, Link} from 'react-router-dom';

class Home extends React.Component {

  render () {
    return (
      <Router>
        <h1>PORTFOLIO</h1>
        <div className="portfolioPic">
          <Link to="/portfolio">
            <img src='IMAGES/Portfolio-Pics-Logo.jpg' className='portfolioPic'/>
          </Link>
        </div>
        <Route exact path="/portfolio">
          <PortfolioWorkPage />
        </Route>
      </Router>
    )
  }
}

export default Home