时间戳

首页 > 解决方案 > ReactJS - 我无法通过路由到达其他内部的组件

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

问题描述

我有一个具有这种结构的网站：

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

当我单击 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

标签： reactjs

解决方案

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

推荐阅读