Reactjs Can';t获取以任何方式传递给entry index.js的值

Reactjs Can';t获取以任何方式传递给entry index.js的值,reactjs,react-redux,Reactjs,React Redux,我正在使用react学习redux,遇到了心理障碍,我有以下entry index.js: import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter, Redirect, Route} from 'react-router-dom'; import {Provider} from 'react-redux'; import store from './store'; import Boot

我正在使用react学习redux,遇到了心理障碍,我有以下entry index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Redirect, Route} from 'react-router-dom';
import {Provider} from 'react-redux';
import store from './store';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import Main from './components/front/Main';
import Login from './components/front/Login';
import Home from './components/front/Home';
import Register from './components/front/Register';
import Forgot from './components/front/Forgot';
import Verify from './components/front/Verify';
import Dashboard from './components/back/Dashboard';
import './css/app.css';

import Auth from './components/Auth';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    Auth.isLogged ? ( //<-need to get props here
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const App = () => (<BrowserRouter>
  <div>
    {/* PUBLIC */}
      <Route path={'/'} exact component={Home}/>
      <Route path={'/login'} component={Login}/>
      <Route path={'/register'} component={Register}/>
      <Route path={'/forgot'} component={Forgot}/>
      <Route path={'/verify'} component={Verify}/>

    {/* PRIVATE */}
      <PrivateRoute path="/dashboard" component={Dashboard}/>

  </div>
</BrowserRouter>);

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

如果您有任何帮助,我们将不胜感激

如果我理解正确,您正在尝试向
PrivateRoute
提供
store.auth.isAuthenticated的上下文

如果您在自己的文件中声明应用程序,您可以
将其连接到应用商店,然后将
isAutenticated
的值传递给您的PrivateRoute组件

//App.js

import React, { Component } from 'react'
import { withRouter, Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'

import PrivateRoute from 'components/PrivateRoute'

@withRouter
@connect(store => ({ 
  isAuthenticated: store.auth.isAuthenticated,
  authenticating: store.auth.authenticating
}))
class App extends Component {

  render() {
    const { isAuthenticated } = this.props

    return (
      <span>
        {/* PUBLIC */}
        { !isAuthenticated && 
          <Switch>
            <Route path={'/'} exact component={Home}/>
            <Route path={'/login'} component={Login}/>
            <Route path={'/register'} component={Register}/>
            <Route path={'/forgot'} component={Forgot}/>
            <Route path={'/verify'} component={Verify}/>
          </Switch>
         }

         {/* PRIVATE */}
         { isAuthenticated &&
           <PrivateRoute 
             isAuthenticated={isAuthenticated}
             path="/dashboard" 
             component={Dashboard}
           />
         }
       </span>        
    )       
  }
}

export default App

您可能需要也可能不需要将connect(应用程序)包装在withRouter中,但我处理路由的方式使这一部分成为必需的。

您的应用程序状态中是否有“isAuthenticated”部分?你能通过选择器访问它吗?是的,它是应用程序状态的一部分。我不确定选择者是不是很棒的人!很高兴你能完成。有机会时,你介意把答案标对吗。谢谢,谢谢!你如何在index.js中调用App.js?“import App from./App'”在App.js中定义类的行中给出了一个语法错误。您能告诉我您的文件夹结构是什么样的吗?似乎您有一些类似于src/components的东西,可能还有一个src/containers,索引位于src/index.js之外?在这种情况下,由于App是一个智能组件,我会将其保存在src/containers中,并通过“./containers/App'/assets/index.js/assets/App.js/assets/components/privaterout.jsI”导入,随着项目的发展,其结构会有所不同。请参见本文中的第二幅图像。但是按照现在的方式,您应该可以从“/App”导入App了。
您确定App.js已经完成了吗?我将导入添加到每个组件中,但仅此而已,尝试将其导入index.js时失败
//App.js

import React, { Component } from 'react'
import { withRouter, Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'

import PrivateRoute from 'components/PrivateRoute'

@withRouter
@connect(store => ({ 
  isAuthenticated: store.auth.isAuthenticated,
  authenticating: store.auth.authenticating
}))
class App extends Component {

  render() {
    const { isAuthenticated } = this.props

    return (
      <span>
        {/* PUBLIC */}
        { !isAuthenticated && 
          <Switch>
            <Route path={'/'} exact component={Home}/>
            <Route path={'/login'} component={Login}/>
            <Route path={'/register'} component={Register}/>
            <Route path={'/forgot'} component={Forgot}/>
            <Route path={'/verify'} component={Verify}/>
          </Switch>
         }

         {/* PRIVATE */}
         { isAuthenticated &&
           <PrivateRoute 
             isAuthenticated={isAuthenticated}
             path="/dashboard" 
             component={Dashboard}
           />
         }
       </span>        
    )       
  }
}

export default App
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)