Skip to content
This repository has been archived by the owner on Sep 11, 2018. It is now read-only.

How to define a route without the CoreLayout props children? #1061

Closed
onweer opened this issue Oct 25, 2016 · 5 comments
Closed

How to define a route without the CoreLayout props children? #1061

onweer opened this issue Oct 25, 2016 · 5 comments

Comments

@onweer
Copy link

onweer commented Oct 25, 2016

I need a landing page 。
Visit the home page(path = '/') and check no session will redirection to /login
Do not want '/login' is in the CoreLayout under the props, but a complete page.

eg:

<Router> 
    <Route path='/' component="CoreLayout">
    <Route path='/login' component="Login">
</Router>
@bulicmatko
Copy link

bulicmatko commented Oct 26, 2016

Hi @onweer,
You should be able to do something like this:

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Home from './Home'
import CounterRoute from './Counter'
import Login from './Login'

export const createRoutes = (store) => ([ // now we are passing an array of routes
  {
    path: '/',
    component: CoreLayout,
    indexRoute: Home,
    childRoutes: [
      CounterRoute(store)
    ]
  },
  {
    path: '/login',
    component: Login
  },
  ...
])

...

Don't forget to change routes PropType in AppContainer.js to PropType.array.isRequired

Also, if you want Layout for your Login component, you can follow pattern from the first route.
For example, you could do stuff like this:

...
  {
    path: '/auth',
    component: AuthLayout,
    indexRoute: SignIn,
    childRoutes: [
      SignUpRoute(store), // { path: 'sign-up', ... }
      RecoverPasswordRoute(store), // { path: 'recover-password', ... }
      ...
    ]
  },
...

Hope this helps ;)
Best Regards

@onweer
Copy link
Author

onweer commented Oct 26, 2016

@bulicmatko Thanks ;) .

@onweer
Copy link
Author

onweer commented Oct 26, 2016

@bulicmatko
how to export the Login Component ?
I use following :

import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path: 'login',
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Login = require('./containers/LoginContainer').default
      const reducer = require('./modules/login').default
      injectReducer(store, { key: 'login', reducer }) // 这个key和components里面拿到的key是同一个key
      cb(null, Login)
    })
  }
})

throw Errors:

Invariant Violation: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Or how can i connect Login to store?

@onweer
Copy link
Author

onweer commented Oct 26, 2016

success with

export const createRoutes = (store) => ([
  Login(store)
])

@bulicmatko
Copy link

@onweer
Glad it helped ;)
Can maybe this issue be closed?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants