Question

我是新手做出反应。我试图通过引导程序导航栏重定向。我的导航栏代码如下所示

{ "ridersCount" : 1, "data" : { "_id" : 3, "userType" : "CAPTAIN", "firstName" : "Baba", "lastName" : "Booey", "captain" : 3 } }
{ "ridersCount" : 2, "data" : { "_id" : 1, "userType" : "CAPTAIN", "firstName" : "Robert", "lastName" : "Reichert", "captain" : 1 } }

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

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

所以当我点击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 Rout 看起来喜欢它......

 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 to="/test1">Check rout link test1</Link>
     <Link to="/test2">Check rout link test2</Link>

使用LinkContainer和NavItem进行重定向的问题

1 个答案: