Как правильно связать компоненты с помощью 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

Код с ошибкой: Reaction-dom.development. js: 17117 Вышеуказанная ошибка произошла в компоненте: в img (создан Home) в div (создан Home ) в Router (создан HashRouter) в HashRouter (создан 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

После комментариев, здесь две реализации, использующие внутреннее состояние, а затем маршрут. В первом случае вы остаетесь на пути 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

Вы можете использовать компонент Link или NavLink, предоставляемый маршрутизатором реакции.

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

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

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