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

Question

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

目前我可以点击图片，它有点像一个链接（有时点击后变成蓝色），尽管它没有链接到其他组件，没有错误显示，网址栏中没有任何变化。什么都没发生。

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

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 dom。发展js:17117上述错误发生在组件中：img（由Home创建）中div（由Home创建）中Router（由HashRouter创建）中HashRouter（由Home创建）中HashRouter（由App创建）中Home（由App创建）中Router（由App创建）中HashRouter（由App创建）中

import { HashRouter as Router, Route, Link} 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'>
            <Route exact path='Portfolio'><PortfolioWorkPage /></Route>
            </img>
             </div> 
      </Router>

    )
  }
}

export default Home

Answer 1

您可以使用react路由器提供的链接或导航链接组件。

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

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

<Router>
  <div>
   <Route exact path="/some-url">
     <MyComponentWithImage />
   </Route>
  </div>
</Router>

Answer 2

下面是使用内部状态和路由的两种实现。在第一个你停留在url路径mywebsite.com，在第二个url路径变成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

使用路线：

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