0

我在我的 React 应用程序中使用 react-router v.4 并且遇到了这个问题：当我点击<Link>组件时，URL 正在改变，但数据没有呈现。这是我的代码片段：

Header.component.js：

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import {Link} from 'react-router-dom';

//utils
import History from '../../utils/History';
import bindAll from 'lodash/bindAll';

class Header extends React.Component {

constructor(props) {
  super(props);
  bindAll(this, '_getHeaderItem');
}

_getHeaderItem() {
  switch (History.location.pathname) {
    case '/sign-in':
      return <li><Link to='/sign-up'>Sign Up</Link></li>;
      break;

    case '/sign-up':
      return <li><Link to='/sign-in'>Sign In</Link></li>;
      break;

    default:
      return null;
  }
}

  render() {
  return (
  <Navbar collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">Elevator</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">Link</NavItem>
    </Nav>
    <Nav pullRight>
      {this._getHeaderItem()}
      <NavDropdown eventKey={4} id='member-dropdown' title={
        <div className='inline-block'>
      <img src='' alt='' />
      Username
        </div>
      }>
        <MenuItem eventKey={4.1}>My profile</MenuItem>
        <MenuItem eventKey={4.2}>Logout</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={4.3}>Administration</MenuItem>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
    </Navbar>
  );
}
}

export default Header;

app.js：（收集所有组件并具有路由逻辑）

import React from 'react';
import ReactDOM from 'react-dom';
import fetch from 'whatwg-fetch';
import { Router, Route, Redirect } from 'react-router';

//utils
import History from './utils/History';

//components
import App from './common/components/App.component';
import SignUp from './modules/signUp/SignUp.component';
import SignIn from './modules/signIn/SignIn.component';
import Footer from './modules/footer/Footer.component';

//styles
require ('./../styles/main.scss');

let loggedIn = localStorage.getItem('token');

loggedIn ? History.replace('/dashboard') : History.replace('/sign-in');

ReactDOM.render(
  <Router history={History}>
    <App>
      <Route path='/sign-in' render={() => (
    loggedIn ? (
      <Redirect to="/dashboard" />
    ) : (
      <SignIn />
    )
      )} />
      <Route path='/sign-up' render={() => (
    loggedIn ? (
      <Redirect to="/dashboard" />
    ) : (
      <SignUp />
    )
      )} />
    </App>
  </Router>,
  document.getElementById('app'));

  ReactDOM.render(<Footer />, document.getElementById('footer'));

临时，我已经通过点击处理完成了它（防止默认行为和 window.location.reload('some/path')），但这不是 React 方式。我会很感激任何建议。

4

0 回答 0