在反应中使用 NavItem 的 LinkContainer 重定向问题

Question

我是反应新手。我正在尝试通过 bootstrap 导航栏重定向。我的导航栏代码如下所示

import React, { Component, PropTypes } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
import * as actionCreators from '../action_creators';

class MainNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
         loggedIn: 1,
        };
    }
    render() {
        return (
               <div>
                <Navbar inverse collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href="/">Test NavBar</a>
                        </Navbar.Brand>
                    <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav>
                            <LinkContainer to={`/test1`}>
                                <NavItem onClick={this.props.getTestContent1} eventKey={1}>Test1</NavItem>
                            </LinkContainer>
                            <LinkContainer to = {`/test2`}>
                               <NavItem onClick={this.props.getTestContent2} eventKey={2}>Test2</NavItem>
                            </LinkContainer>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <div className="content">
                    {this.props.children}
                </div>
          </div>
        )
    }
}

MainNav.propTypes = {
  getTestContent1 : PropTypes.func.isRequired,
  getTestContent2 : PropTypes.func.isRequired,
};

export default connect(null,actionCreators)(MainNav);

如您所见，每个 Nav 项都附加了一个 onclick 事件，该事件用于从我正在使用 redux-thunk 的服务器获取数据。我在那部分没有问题。我面临的主要问题是重定向没有发生。我的路线文件如下所示

import MainNav from './components/navbar.jsx';
import {HomePageContainer} from './components/defaultHome.jsx';
import testHomePageContainer from './components/testHomePage.jsx';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route,Switch  } from 'react-router-dom';

export const routes2 =
    <MainNav>
        <Switch>
            <Route  exact path="/" component={HomePageContainer}/>
            <Route  path="/test1" component={testHomePageContainer}/>
            <Route  path="/test2" component={testHomePageContainer}/>
        </Switch>
</MainNav>

因此，当我单击 test1 时，我仍在主页容器中，而 testHomePageContainer 未呈现。我不确定是什么阻止了重定向。我在这里先向您的帮助表示感谢。

Answer 1

我不知道你的 React 和所有其他版本，但你可以获得更新 React 版本的帮助：

"history": "^4.6.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"

React 溃败 喜欢...

 import {BrowserRouter,Route,Link} from 'react-router-dom'; // for BrowserRouter rout

<BrowserRouter>
       <div>
          <Route exact path='/' component={Layout}></Route>
          <Route path='/test1' name="test1" component={testHomePageContainer}> </Route>
           <Route path='/test2' name="test2" component={Nametest}></Route>
       </div>
 </BrowserRouter>

有关新 React Rout Quick Start

的更多详细信息

对于Link视图或导航视图

    <Link to="/test1">Check rout link test1</Link>
     <Link to="/test2">Check rout link test2</Link>

在反应中使用 NavItem 的 LinkContainer 重定向问题

Issue in redirection with LinkContainer with NavItem in react

reactjs

react-bootstrap

react-router

react-redux