代码之家  ›  专栏  ›  技术社区  ›  claudiopb

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

  •  0
  • claudiopb  · 技术社区  · 6 年前

    我有一个这样结构的网站:

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

    当我点击标题中的一个logo时,它不起作用,什么也没有发生,我想访问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
    
    2 回复  |  直到 6 年前
        1
  •  0
  •   Sr1871    6 年前

    <BrowserRouter> 它更像一个历史浏览器,你需要使用开关代替。

    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>
      )
    }