Question

我有一个具有以下结构的网站：

<Header>
  <MenuPrincipal>
    <Home></Home>
  </MenuPrincipal>
</Header>

当我单击标题中的徽标时，它不起作用，什么也没有发生，因此我想访问Home组件<Home>组件位于<MenuPrincipal>的内部。 <Header>组件是父组件，您可以在上面的结构中看到。我该如何解决？

import React from 'react'
import { BrowserRouter as Router, Route, Link,  } from 'react-router-dom'
import Home from './Home';

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import { showBGImage } from './actions';

const Header = (props) => {
  return (
    <div className="header">
      <div>
        <Router>
          <div>
            <h1>
              <Link onClick={showBGImage} className="home-link" to='/'>Mauro Bitar<br />
                <small className="home-link">arquiteto</small>
              </Link>
            </h1>
            <Route exact path='/' render={() => <Home />} />
          </div>
        </Router>
      </div>
    </div>
  )
}


export default Header

Answer 1

<BrowserRouter>，它更像是历史记录浏览器，您需要改用Switch。

import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'

   const Header = (props) => {
  return (
    <div className="header">
      <Router>
        <Switch>
          <div>
            <h1>
              <Link onClick={showBGImage} className="home-link" to='/'>Mauro Bitar<br />
                <small className="home-link">arquiteto</small>
              </Link>
            </h1>
            <Route exact path='/' render={() => <Home />} />
          </div>
        </Switch>
      </Router>
    </div>
  )
}

Answer 2

只需使用类似的内容：

<BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home} />
    </Switch>
</BrowserRouter>

ReactJS-我无法通过路线到达其他内部的组件

2 个答案: