sb-admin-react icon indicating copy to clipboard operation
sb-admin-react copied to clipboard

Routing problem

Open BlancNicolas opened this issue 7 years ago • 9 comments

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 !

BlancNicolas avatar Nov 29 '17 10:11 BlancNicolas

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

sarika01 avatar Nov 29 '17 10:11 sarika01

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.

BlancNicolas avatar Nov 29 '17 11:11 BlancNicolas

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

sarika01 avatar Nov 29 '17 11:11 sarika01

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.

BlancNicolas avatar Nov 29 '17 11:11 BlancNicolas

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

sarika01 avatar Nov 29 '17 11:11 sarika01

Is but not home ! Le mer. 29 nov. 2017 à 12:43, Sarika [email protected] 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 .

BlancNicolas avatar Nov 29 '17 12:11 BlancNicolas

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 avatar Nov 29 '17 12:11 sarika01

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.

sarika01 avatar Nov 29 '17 12:11 sarika01

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

Thank you @sarika01 !

BlancNicolas avatar Nov 29 '17 18:11 BlancNicolas