start-react / sb-admin-react

Starter theme for React JS Dashboard Apps
http://sb-admin-react.geekydev.com:3009/
Other
835 stars 274 forks source link

Routing problem #42

Open BlancNicolas opened 6 years ago

BlancNicolas commented 6 years ago

Hi ! I wanted to change home to login as first page. So I modified index.js in /src/routes.

What I have changed

export default [

  {
    path: ['/','/login'],
    children: [
      login,
    ],
    async action({ next, render, context }) {
      const component = await next();
      if (component === undefined) return component;
      return render(
        <App context={context}>{component}</App>
      );
    },
  },

  {
    path: '/home',

  // keep in mind, routes are evaluated in order
    children: [
      home,
      // contact,
      table,
      button,
      flotcharts,
      forms,
      grid,
      icons,
      morrisjscharts,
      notification,
      panelwells,
      typography,
      // register,
      blank,
      // place new routes before...
      // content,
      error,
    ],
    async action({ next, render, context }) {
      // console.log('inside dashboard');
      const component = await next();
      // console.log('inside dasdboard component', component);
      if (component === undefined) return component;
      return render(
        <div>
          <Header />
          <div id="page-wrapper" className="page-wrapper">
            <App context={context}>{component}</App>
          </div>
        </div>
      );
    },
  }, 

Problems

1) The problem is that my CSS didn't load on localhost:3000, and loaded on localhost:3001 (with browsersync though).

2) When I go to localhost:3001/home, the dashboard appears but it disappears few seconds after. And with the default routing, there is no problem so I guess I don't understand how routing works in this bundle.

The errors from the console

warning.js?85a7:36 Warning: Failed prop type: Invalid prop `children` of type `boolean` supplied to `App`, expected a single ReactElement.
    in App

warning.js?85a7:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ContainerDimensions component.

Thanks for your job, and for this amazing pack !

sarika01 commented 6 years ago

For the first problem, when you run in dev mode i.e. with 'npm start', the page is loaded on localhost:3001 with browsersync. If you build it and then run it as node server, then you would be able to see the pages on localhost:3000

For the default routing, it's not just the changes in index.js, you would have to change the route path in individual route files as well. In this case, you would have to change in src/routes/home/index.js

BlancNicolas commented 6 years ago

in src/home/index.js

export default {

  path: '/home',

  async action() {
    return <Home />;
},
};

in login/index.js

export default {

  path: '/',

  action() {
    return <Login />;
  },

};

Now at localhost:3001/home, nothing appears.

sarika01 commented 6 years ago

Did you change back the path for login from array to '/' ? or is the login page loaded by default now?

BlancNicolas commented 6 years ago

Yes I changed back but now, after changing these paths in both index/js files, localhost:3000/home or localhost:3001/home show nothing on the navigator.

Moreover, I can see pages on localhost:3000 with "npm start" but a css file dosen't load and there is no error except those from navigator.

sarika01 commented 6 years ago

Is the login page loading? Which browser are you using?

BlancNicolas commented 6 years ago

Is but not home ! Le mer. 29 nov. 2017 à 12:43, Sarika notifications@github.com a écrit :

Is the login page loading?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/start-react/sb-admin-react/issues/42#issuecomment-347835885, or mute the thread https://github.com/notifications/unsubscribe-auth/AWPF8f2gKgna91gyq0dTuxXq3W5VvAvJks5s7UNIgaJpZM4Qutri .

sarika01 commented 6 years ago

You have to swap the position of '/' with login component and '/home' with the list of other routes in the routes/index.js file.

sarika01 commented 6 years ago

If you are just looking at showing login page first in the absence of authentication, then you can do it programmatically too in the home/index.js by putting in a check for auth there and then leave the routes as it is.

BlancNicolas commented 6 years ago

Fixed ! I had to swap position of /' in login.js.

Thank you @sarika01 !