react-router-dom链接在app.js（父组件）中有效，但在子组件中不起作用

时间：2018-09-04 02:48:35

标签： reactjs redux react-router-v4 react-router-dom

我有条件地在'app.js'（父组件）和'home.js'中具有'Nav'组件，以便仅通过设置header { height: 90vh }在首页的标题底部具有空白响应。

为此，我在“ Home.js”的标头标记中包含了“

2 个答案:

答案 0 :(得分：1)

在这里，我将简单介绍一个我通常使用的设置示例。那么，这种方法呢？

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Provider from "react-redux/es/components/Provider";
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';

// Usually I would do this in an external file, but here I'm configuring my store

const myStore = configureStore(initialState) {
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
  );
}    

// After that, I'm wrapping my App component inside of the Provider and passing in the configured store

ReactDOM.render((
    <Provider store={myStore }>
        <App/>
    </Provider>
), document.getElementById('root'));

App.js 

import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom'
import PrimaryLayoutContainerComponent from "../containers/PrimaryLayoutContainer";

// In my App.js I'm wrapping my primary layout container with BrowserRouter to get access to the history and also passing in the props

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <PrimaryLayoutContainerComponent {...this.props}/>
            </BrowserRouter>
        );
    }
}
export default App;

PrimaryLayoutContainerComponent.js
在这个（主容器）中，我将充分利用以前的配置以及与Redux状态管理有关的一切需求。在此阶段，我还使用withRouter来访问历史记录对象的属性。

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as myActions from '../actions';
import PrimaryLayout from "../components/layout/PrimaryLayout";
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';


class PrimaryLayoutContainerComponent extends Component {
    render() {
        return (
            <div>
                 //Here we pass our history as props
                <PrimaryLayout  history={this.props.history} 
                                propsX={this.props.propsX}

                                propsY={this.props.actions.propsY}
                />
            </div>
        )
    }
}

// In these (and all other cases) I would highly recommend using propTypes.
// They could give you the answer in where the issues might be in your future development 

PrimaryLayoutContainerComponent.propTypes = {
    loggedUser: PropTypes.string,
    actions: PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
    return { xxxx }
}

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PrimaryLayoutContainerComponent));

...然后最后在我的 Primary Layout Component 中，我将这样定义所有路线：

PrimaryLayoutComponent.js 

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
// ... import all my compoenents


class PrimaryLayout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentRoute: '' // I would use the state to dynamically change the  
                             // routes depending on which one was clicked
        }
    }



    componentWillReceiveProps(nextProps) {
        this.setState({
            currentRoute: nextProps.history.location.pathname
        })
    }

    componentWillMount() {
        this.setState({
            currentRoute: this.props.history.location.pathname
        })
    }

    render() {

        const { currentRoute } = this.state;

        return (
            <div className="wrapper">
                <header className="xxxx" role="banner">
                    <div className="container">
                        <div className="xxxxx">


                           <Link to="/home">
                             <img src={logo} alt="your logo"/> Your App Name
                           </Link>
                            <ul className="navbar__menu">
                                    <li className={currentRoute === "/home" ? "active" : ""}>
                                        <Link to="/home"> Home </Link>
                                    </li>

                                    <li className={currentRoute === "/componentOne" ? "active" : ""}>
                                        <Link to="/componentOne"> componentOne</Link>
                                    </li>

                                    <li className={currentRoute === "/componentTwo" ? "active" : ""}>
                                        <Link to="/componentTwo"> componentTwo</Link>
                                    </li>
                            </ul>

                        </div>
                    </div>
              </header>

// At the very end, I'm using the Switch HOC and defining my routes inside of a main tag

               <main>
                <Switch>
                      <Route path='/home' component={HomeContainerComponent} />
                  <Route path='/componentOne' component={componentOne} />               
                  <Route path='/componentTwo' component={componentTwo} />
                  <Redirect to="/home"/>
                </Switch>
                </main>
            </div>
        )
    }
}

export default PrimaryLayout;

我希望我的方法对您有所帮助，如果您还有其他疑问，请告诉我。我会尽快给他们答复

答案 1 :(得分：0)

看您的样式，看来header has a negative z-index。

通过设置负Z索引，这很可能会干扰<header>的子元素（即<nav>组件的子元素）接收点击事件和/或正确响应光标。

我建议从您的z-index: -1;中删除header.scss，以解决您的问题。希望有帮助！

相关问题
最新问题