Question

我是新手，对这些路线作出反应和打击。我目前正在尝试创建一个处理路由授权的组件。我的代码基于这个项目：https://github.com/tylermcginnis/react-router-firebase-auth

我有一个应用程序组件，它是我的应用程序的基础。它呈现我的应用程序的框架（MainContainer等），并将其中的路由定义为常量。 App.js.路径'/'被路由到MyComponent。

import MyComponent from './pages/MyComponent';
import AllRoutes from './allRoutes'

class App extends React.Component {

  render() {

    return (
      <MainContainer {...this.props} classNames='boxed'>
        <Sidebar />
        <Header />
        <div id='body'>
          <Grid>
            <Row>
              <Col xs={12}>
                {this.props.children}
              </Col>
            </Row>
          </Grid>
        </div>
        <Footer />
      </MainContainer>
    );
  }
}

const routes = (
  <Route component={App}>
   <AllRoutes />
  </Route>
);


export default (
  <Route >
    <Route path='/' component={App}>
      <IndexRoute component={MyComponent} />
    </Route>
    <Route >
      {routes}
    </Route>
  </Route >
);

我还有一个allRoutes.js文件，它有逻辑来确定是否应该登录（通过firebase，但现在不相关）或不。有些路线是公开的，每个人都可以访问，有些则不是（就像你想要编辑你的个人资料一样）。我有三种类型的路线： - 路线：每个人都可以访问 - PublicRoute：如果未登录则可访问。如果已登录，则重定向到root - PrivateRoute：只有登录后才能访问，如果没有，则重定向到登录

allRoutes.js

//redirects to login if not authed
function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

//redirects to root if authed
function PublicRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === false
        ? <Component {...props} />
        : <Redirect to='/' />}
    />
  )
}

//all the routes
export default class AllRoutes extends React.Component {
  state = {
    authed: false,
    loading: true,
  }
  componentDidMount () {
    this.removeListener = firebaseAuth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({
          authed: true,
          loading: false,
        })
      } else {
        this.setState({
          authed: false,
          loading: false
        })
      }
    })
  }
  componentWillUnmount () {
    this.removeListener()
  }

  render() {
    return (
      this.state.loading === true ? <h1>Loading</h1> : (
        <Route>
          <Route path='/my-component' component={MyComponent} />
          <Route path='/not-found' component={NotFound} />
          <PrivateRoute authed={this.state.authed} path='/edit-user' component={EditUser} />
          <PublicRoute authed={this.state.authed} path='/login' component={Login} />
        </Route>
    ));
  }
}

当我转到根'/'时，项目构建并且网站框架中加载了MyComponent。当我转到其中一个已定义的链接时，比如'/ not-found'，我得到了一个简单的找不到的链接。当我没有在路由中添加这个逻辑并且在我的app.js中静态定义我的所有路由时，它工作得很好，所以这应该不是问题。我有一种感觉，问题是我无法渲染这样的路线（看起来很抽象），但我不确定。

渲染React Routing组件不起作用

0 个答案: