如何使用 React Router 正确链接组件？

Question

我正在使用 React 和 React Router 尝试将我的组件链接到一个项目中。我想将主页（当前组件）中的图片链接到其他组件。

目前我可以点击图片，它有点像一个链接（有时我点击它后会变成蓝色），虽然它没有链接到其他组件，没有错误显示，并且 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

Code with error: react-dom.development.js:17117 组件出现上述错误：in img (created by Home) in div (created by Home) in Router (created by HashRouter) in HashRouter (created by Home）在Home（App创建）在Router（HashRouter创建）在HashRouter（App创建）在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

在 cmets 之后，这里有两个使用内部状态和路由的实现。在第一个中，您停留在 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

Answer 2

你可以使用react router提供的Link或NavLink组件。

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

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

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