相关疑难解决方法(0)

使用React router v4开发React应用程序.一切顺利,直到我在我的应用程序中介绍了Redux.从那以后点击链接更改路由,浏览器URL会发生变化,但是路径对应的组件没有加载.如果我注释掉Redux代码,它会很好用.可能是什么导致了这个？这是我的路由代码:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";

class LeftComponent extends Component {
  render() {
    return (
      <div className="col-xs-6">
          <p>
            Current sub route: {this.props.currentRoute}
          </p>
          <ul>
            <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
            <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
            <li onClick={this.props.goToSub2}><Link …

与Redux连接后,示例https://reacttraining.com/react-router/web/example/auth-workflow中的 PrivateRoute无效.

我的PrivateRoute看起来与原始版本几乎相同,但只连接到Redux并在原始示例中使用它而不是fakeAuth.

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
   {...rest}
   render={props =>
   auth.isAuthenticated
    ? <Component {...props} />
    : <Redirect to={{ pathname: "/login" }} />}
  />
);

 PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.func.isRequired
 }

 const mapStateToProps = (state, ownProps) => {
  return {
     auth: state.auth
  }
};

export default connect(mapStateToProps)(PrivateRoute);

用法和结果: -

1. 不工作,但希望和期望工作
   • <PrivateRoute path="/member" component={MemberPage} />
2. 工作,但不希望像这样使用
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. 工作.只是工作,但根本不想使用.从这一点可以理解,如果你将原始的PrivateRoute连接到Redux,你需要传递一些额外的道具(任何道具)来使PrivateRoute工作,否则它不起作用.任何人,请对这种行为给出一些暗示.这是我的主要问题
   • <PrivateRoute path="/member" component={MemberPage} …

React router Link 似乎不适用于我的应用程序。似乎我失踪了，因为基本不起作用。我的链接组件将 URL 更新为 /products/singleproduct 但我的页面刚刚中断....谁能告诉我如何解决这个问题？

应用程序.js

import React from 'react';
import Header from './Header';
import Body from './Body';
import Main from './Main';
require('../../scss/style.scss');

const App = () => (
    <div>
    	<Header />
    	<Main />
    </div>
);

export default App;

主程序

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import ServicePage from './ServicePage';
import ProductPage from './ProductPage';
import SingleProductPage from './SingleProductPage';
import Body from './Body';

export default class Main extends Component { …