React router redirection

Version imprimable

J'utilise le template Dashboard de material ui et j'ai ajouté une page de connexion. Quand je rentre http://localhost:3000, je suis bien redirigé vers http://localhost:3000/login

Mais quand je clique dans mon menu pour atteindre la page profil (http://localhost:3000/use), je suis de nouveau redirigé vers la page de connexion (http://localhost:3000/login).

Je ne comprends pas le problème.

Mon fichier(dossier) principal de parcours(routes) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Login from "views/authentification/LoginPage.jsx";
import Dashboard from "layouts/Dashboard/Dashboard.jsx";
 
const indexRoutes = [
{ 
    path: "/login", 
    component: Login
},
{ 
    path: "/dashboard", 
    component: Dashboard 
},
{ 
    redirect: true, 
    path: "/", 
    to: "/login"
}
];
 
export default indexRoutes;

Mon fichier de route Dahboard :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import Person from "@material-ui/icons/Person";
// import ContentPaste from "@material-ui/icons/ContentPaste";
import LibraryBooks from "@material-ui/icons/LibraryBooks";
import BubbleChart from "@material-ui/icons/BubbleChart";
import LocationOn from "@material-ui/icons/LocationOn";
import Notifications from "@material-ui/icons/Notifications";
import Unarchive from "@material-ui/icons/Unarchive";
// core components/views
import DashboardPage from "views/Dashboard/Dashboard.jsx";
import UserProfile from "views/UserProfile/UserProfile.jsx";
import TableList from "views/TableList/TableList.jsx";
import Typography from "views/Typography/Typography.jsx";
import Icons from "views/Icons/Icons.jsx";
import Maps from "views/Maps/Maps.jsx";
import NotificationsPage from "views/Notifications/Notifications.jsx";
import UpgradeToPro from "views/UpgradeToPro/UpgradeToPro.jsx";
 
const dashboardRoutes = [
{
path: "/dashboard",
sidebarName: "Dashboard",
navbarName: "Material Dashboard",
icon: Dashboard,
component: DashboardPage
},
{ 
path: "/user",
exact: true,
sidebarName: "User Profile",
navbarName: "Profile",
icon: Person,
component: UserProfile
},
{
path: "/table",
sidebarName: "Table List",
navbarName: "Table List",
icon: "content_paste",
component: TableList
},
..........
];
 
export default dashboardRoutes;

12/11/2018, 16h44
gwyohm

tu as oublié le r dans ton code ou en écrivant ce message (http://localhost:3000/use vs http://localhost:3000/user)
Si tu n'as pas mis l'option exact sur ton mapping de "/" vers "login", "/use" va faire un match sur "/" et donc te renvoyer sur le login

Même en mettant l'option exact sa marche pas:

Code:

1
2
3
4
5
6
    { 
        redirect: true, 
        exact: true,
        path: "/", 
        to: "/login"
    }

12/11/2018, 17h14
gwyohm

OK, mais est-ce que le résultat est différent ?
A propos du r (use / user), t'es bon dans test tests, c'était une erreur dans ton premier post ?
Les autres routes fonctionnent ? (table)
je n'ai pas de vue d'ensemble, donc j'essaye de deviner...
C'est pas /dashboard/user ta route plutôt ?

Pardons, voici le fichier complet mis à jour des routes du dashboard :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import Person from "@material-ui/icons/Person";
// import ContentPaste from "@material-ui/icons/ContentPaste";
import LibraryBooks from "@material-ui/icons/LibraryBooks";
import BubbleChart from "@material-ui/icons/BubbleChart";
import LocationOn from "@material-ui/icons/LocationOn";
import Notifications from "@material-ui/icons/Notifications";
import Unarchive from "@material-ui/icons/Unarchive";
// core components/views
import DashboardPage from "views/Dashboard/Dashboard.jsx";
import UserProfile from "views/UserProfile/UserProfile.jsx";
import TableList from "views/TableList/TableList.jsx";
import Typography from "views/Typography/Typography.jsx";
import Icons from "views/Icons/Icons.jsx";
import Maps from "views/Maps/Maps.jsx";
import NotificationsPage from "views/Notifications/Notifications.jsx";
import UpgradeToPro from "views/UpgradeToPro/UpgradeToPro.jsx";
 
const dashboardRoutes = [
  {
    path: "/dashboard",
    sidebarName: "Dashboard",
    navbarName: "Material Dashboard",
    icon: Dashboard,
    component: DashboardPage
  },
  {
    path: "/user",
    sidebarName: "User Profile",
    navbarName: "Profile",
    icon: Person,
    component: UserProfile
  },
  {
    path: "/table",
    sidebarName: "Table List",
    navbarName: "Table List",
    icon: "content_paste",
    component: TableList
  },
  {
    path: "/typography",
    sidebarName: "Typography",
    navbarName: "Typography",
    icon: LibraryBooks,
    component: Typography
  },
  {
    path: "/icons",
    sidebarName: "Icons",
    navbarName: "Icons",
    icon: BubbleChart,
    component: Icons
  },
  {
    path: "/maps",
    sidebarName: "Maps",
    navbarName: "Map",
    icon: LocationOn,
    component: Maps
  },
  {
    path: "/notifications",
    sidebarName: "Notifications",
    navbarName: "Notifications",
    icon: Notifications,
    component: NotificationsPage
  },
  {
    path: "/upgrade-to-pro",
    sidebarName: "Upgrade To PRO",
    navbarName: "Upgrade To PRO",
    icon: Unarchive,
    component: UpgradeToPro
  }
  //{ redirect: true, path: "/", to: "/dashboard", navbarName: "Redirect" } : Poser problème pour la redirection après la connexion
];
 
export default dashboardRoutes;

Aucunes ne fonctionne. Elle redirige vers la page de login.

Voici le layouts du Dashboard :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/* eslint-disable */
import React from "react";
import PropTypes from "prop-types";
import { Switch, Route, Redirect } from "react-router-dom";
// creates a beautiful scrollbar
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import Header from "components/Header/Header.jsx";
import Footer from "components/Footer/Footer.jsx";
import Sidebar from "components/Sidebar/Sidebar.jsx";
 
import dashboardRoutes from "routes/dashboard.jsx";
 
import dashboardStyle from "assets/jss/material-dashboard-react/layouts/dashboardStyle.jsx";
 
import image from "assets/img/sidebar-2.jpg";
import logo from "assets/img/reactlogo.png";
 
const switchRoutes = (
  <Switch>
    {dashboardRoutes.map((prop, key) => {
      if (prop.redirect)
        return <Redirect from={prop.path} to={prop.to} key={key} />;
      return <Route path={prop.path} component={prop.component} key={key} />;
    })}
  </Switch>
);
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mobileOpen: false
    };
    this.resizeFunction = this.resizeFunction.bind(this);
  }
  handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };
  getRoute() {
    return this.props.location.pathname !== "/maps";
  }
  resizeFunction() {
    if (window.innerWidth >= 960) {
      this.setState({ mobileOpen: false });
    }
  }
  componentDidMount() {
    if (navigator.platform.indexOf("Win") > -1) {
      const ps = new PerfectScrollbar(this.refs.mainPanel);
    }
    window.addEventListener("resize", this.resizeFunction);
  }
  componentDidUpdate(e) {
    if (e.history.location.pathname !== e.location.pathname) {
      this.refs.mainPanel.scrollTop = 0;
      if (this.state.mobileOpen) {
        this.setState({ mobileOpen: false });
      }
    }
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.resizeFunction);
  }
  render() {
    const { classes, ...rest } = this.props;
    return (
      <div className={classes.wrapper}>
        <Sidebar
          routes={dashboardRoutes}
          logoText={"Creative Tim"}
          logo={logo}
          image={image}
          handleDrawerToggle={this.handleDrawerToggle}
          open={this.state.mobileOpen}
          color="blue"
          {...rest}
        />
        <div className={classes.mainPanel} ref="mainPanel">
          <Header
            routes={dashboardRoutes}
            handleDrawerToggle={this.handleDrawerToggle}
            {...rest}
          />
          {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
          {this.getRoute() ? (
            <div className={classes.content}>
              <div className={classes.container}>{switchRoutes}</div>
            </div>
          ) : (
            <div className={classes.map}>{switchRoutes}</div>
          )}
          {this.getRoute() ? <Footer /> : null}
        </div>
      </div>
    );
  }
}
 
App.propTypes = {
  classes: PropTypes.object.isRequired
};
 
export default withStyles(dashboardStyle)(App);

quand je tape http://localhost:3000/dashboard/user, sa reste sur la page du Dashboard

12/11/2018, 17h52
totot

Voici aussi comment je redirige après la connexion:

Code:

return <Redirect to={"/dashboard"}/>;

Salut,

Je suis pas convaincu par

Code:

1
2
3
4
5
6
7
8
9
10
 
const switchRoutes = (
  <Switch>
    {dashboardRoutes.map((prop, key) => {
      if (prop.redirect)
        return <Redirect from={prop.path} to={prop.to} key={key} />;
      return <Route path={prop.path} component={prop.component} key={key} />;
    })}
  </Switch>
);

Peux tu essayer de changer ta méthode render:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
class App extends React.Component {
 
  // ...
 
  render() {
    return (
      <Switch>
        {dashboardRoutes.map((prop, key) => {
          if (prop.redirect)
            return <Redirect from={prop.path} to={prop.to} key={key} />;
      return <Route path={prop.path} component={prop.component} key={key} />;
    })}
  </Switch>);
/*
    const { classes, ...rest } = this.props;
    return (
      <div className={classes.wrapper}>
        <Sidebar
          routes={dashboardRoutes}
          logoText={"Creative Tim"}
          logo={logo}
          image={image}
          handleDrawerToggle={this.handleDrawerToggle}
          open={this.state.mobileOpen}
          color="blue"
          {...rest}
        />
        <div className={classes.mainPanel} ref="mainPanel">
          <Header
            routes={dashboardRoutes}
            handleDrawerToggle={this.handleDrawerToggle}
            {...rest}
          />
          {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
          {this.getRoute() ? (
            <div className={classes.content}>
              <div className={classes.container}>{switchRoutes}</div>
            </div>
          ) : (
            <div className={classes.map}>{switchRoutes}</div>
          )}
          {this.getRoute() ? <Footer /> : null}
        </div>
      </div>
    );
*/
  }
}

Ensuite, je pense que ta route est /dashboard/user et non /user

++

13/11/2018, 09h57
totot

en effet, faut que je rajoute /dashboard devant toute mes url dans mon fichier de route.
Mais pourquoi je ne peux pas les laisser telle quel
13/11/2018, 10h17
gwyohm

Citation:

Envoyé par totot

Mais pourquoi je ne peux pas les laisser telle quel

Parce que tu les explote en nested route de dashboard:

Dans ton code, c'est le composant qui répond à Dashboard qui va exploiter le path et ensuite choisir ce que lui affiche. Pour que ce composant soit appelé, tu dois avoir /dashboard dans l'URL
13/11/2018, 10h18
totot

J'ai pas compris ton explication là
13/11/2018, 10h36
gwyohm
Dans ton indexRoutes, tu as défini:
- /login qui va sur ton composant de Login
- /dashboard qui va sur Dashboard
- / qui redirige sur /login
Dans dashboardRoutes tu as défini notamment /user qui va sur User
Donc pour pouvoir atteindre un code capable de traiter /user, tu dois déjà être dans Dashboard. Or Dashboard n'est executé que si l'URL contient /dashboard
En fait dans ton cas, /user est une NestedRoute de Dashboard.

Si tu souhaites avoir /user, tu dois faire ce mapping dans ton indexRoutes.

Les nested routes sont en général plutôt utilisées pour gérer la granularité d'accès

Par exemple /users (défini en index route) va sur le composant Users (un peu comme une catégorie)

Ce composant va avoir une nested route qui va réagir à l'id d'un user (si l'id est présent dans l'url) et sinon affiche par exemple la liste des users
Ensuite tu peux imaginer que le composant qui réagit à /user/:id affiche par défaut la fiche de ton user (en visualisation) mais qu'une nested route /edit affichera ce même user en edition.

cet article est pas mal :
https://tylermcginnis.com/react-router-nested-routes/
13/11/2018, 10h40
totot

Très bien.

Dans mon cas c'est quoi le mieux
13/11/2018, 10h47
gwyohm

Je n'ai pas de jugement à porter. Je ne connais pas ton projet, ce que tu cherches à faire au final...
Moi j'ai plutôt tendance à faire pointer / sur la home (ton dashboard ?), rediriger sur /login si l'utilisateur n'est pas connecté
puis dans Dashboard (le composant pas la route) à traiter soit le cas sans rien de plus dans l'URL avec des widgets... soit en fonction de l'url, donner accès à d'autres fonctions. Par exemple
/users -> gestion des user
/account -> gérer mon compte
...
13/11/2018, 10h53
totot

En effet, c'est plus ou moins ce que je vais faire au final. Quand on arrivera sur le site, on aura une page d'accueil avec une brève présentation (http://localhost:3000/).
Ensuite, on aura un onglet pour accéder à la page de login (http://localhost:3000/login).
Et après la connexion, on est redirigé vers le dashboard (http://localhost:3000/dashboard)

Maintenant faut que je trouve comment mettre en place tout cela. Je voudrais en plus garder mes 2 fichiers de routes distincts.

Je reviens ici car je n'arrive toujours pas à mettre correctement mes routes en places.
Voici ce que je veux :
http://localhost:3000/ : Page d'accueil de mon site avec une description ...
http://localhost:3000/login : Page de login
http://localhost:3000/private/dashboard : Tableau de bord de l'utilisateur
http://localhost:3000/private/uneFonctionalité

Je n'arrive pas à faire la redirection vers le dashboard depuis la page de login

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
react-dom.development.js:57 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (react-dom.development.js:57)
    at scheduleWork (react-dom.development.js:18486)
    at Object.enqueueSetState (react-dom.development.js:12143)
    at Router.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
    at Router.js:102
    at listener (createTransitionManager.js:43)
    at createTransitionManager.js:61
    at Array.forEach (<anonymous>)
    at Object.notifyListeners (createTransitionManager.js:60)
    at setState (createBrowserHistory.js:84)
    at createBrowserHistory.js:198
    at Object.confirmTransitionTo (createTransitionManager.js:33)
    at Object.replace (createBrowserHistory.js:181)
    at Redirect.perform (Redirect.js:115)
    at Redirect.componentDidMount (Redirect.js:75)
    at commitLifeCycles (react-dom.development.js:15986)
    at commitAllLifeCycles (react-dom.development.js:17388)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:17549)
    at completeRoot (react-dom.development.js:19002)
    at performWorkOnRoot (react-dom.development.js:18924)
    at performWork (react-dom.development.js:18826)
    at performSyncWork (react-dom.development.js:18799)
    at requestWork (react-dom.development.js:18676)
    at scheduleWork (react-dom.development.js:18480)
    at Object.enqueueSetState (react-dom.development.js:12143)
    at LoginPage.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:386)
    at LoginPage.jsx:76
invariant @ react-dom.development.js:57
scheduleWork @ react-dom.development.js:18486
enqueueSetState @ react-dom.development.js:12143
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
(anonymous) @ Router.js:102
listener @ createTransitionManager.js:43
(anonymous) @ createTransitionManager.js:61
notifyListeners @ createTransitionManager.js:60
setState @ createBrowserHistory.js:84
(anonymous) @ createBrowserHistory.js:198
confirmTransitionTo @ createTransitionManager.js:33
replace @ createBrowserHistory.js:181
perform @ Redirect.js:115
componentDidMount @ Redirect.js:75
commitLifeCycles @ react-dom.development.js:15986
commitAllLifeCycles @ react-dom.development.js:17388
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:17549
completeRoot @ react-dom.development.js:19002
performWorkOnRoot @ react-dom.development.js:18924
performWork @ react-dom.development.js:18826
performSyncWork @ react-dom.development.js:18799
requestWork @ react-dom.development.js:18676
scheduleWork @ react-dom.development.js:18480
enqueueSetState @ react-dom.development.js:12143
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
(anonymous) @ LoginPage.jsx:76
Promise.then (async)
handleSubmit @ LoginPage.jsx:68
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:622
executeDispatchesInOrder @ react-dom.development.js:647
executeDispatchesAndRelease @ react-dom.development.js:747
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:760
forEachAccumulated @ react-dom.development.js:727
runEventsInBatch @ react-dom.development.js:903
runExtractedEventsInBatch @ react-dom.development.js:913
handleTopLevel @ react-dom.development.js:5078
batchedUpdates$1 @ react-dom.development.js:19041
batchedUpdates @ react-dom.development.js:2307
dispatchEvent @ react-dom.development.js:5158
interactiveUpdates$1 @ react-dom.development.js:19103
interactiveUpdates @ react-dom.development.js:2328
dispatchInteractiveEvent @ react-dom.development.js:5134
index.js:1452 The above error occurred in the <Redirect> component:
    in Redirect (at src/index.js:45)
    in Switch (at src/index.js:42)
    in Router (at src/index.js:41)
    in I18nextProvider (at src/index.js:40)
 
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
function.console.(anonymous function) @ index.js:1452
logCapturedError @ react-dom.development.js:15845
logError @ react-dom.development.js:15880
update.callback @ react-dom.development.js:16716
callCallback @ react-dom.development.js:11636
commitUpdateEffects @ react-dom.development.js:11676
commitUpdateQueue @ react-dom.development.js:11664
commitLifeCycles @ react-dom.development.js:16029
commitAllLifeCycles @ react-dom.development.js:17388
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:17549
completeRoot @ react-dom.development.js:19002
performWorkOnRoot @ react-dom.development.js:18924
performWork @ react-dom.development.js:18826
performSyncWork @ react-dom.development.js:18799
requestWork @ react-dom.development.js:18676
scheduleWork @ react-dom.development.js:18480
enqueueSetState @ react-dom.development.js:12143
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:386
(anonymous) @ LoginPage.jsx:76
Promise.then (async)
handleSubmit @ LoginPage.jsx:68
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:622
executeDispatchesInOrder @ react-dom.development.js:647
executeDispatchesAndRelease @ react-dom.development.js:747
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:760
forEachAccumulated @ react-dom.development.js:727
runEventsInBatch @ react-dom.development.js:903
runExtractedEventsInBatch @ react-dom.development.js:913
handleTopLevel @ react-dom.development.js:5078
batchedUpdates$1 @ react-dom.development.js:19041
batchedUpdates @ react-dom.development.js:2307
dispatchEvent @ react-dom.development.js:5158
interactiveUpdates$1 @ react-dom.development.js:19103
interactiveUpdates @ react-dom.development.js:2328
dispatchInteractiveEvent @ react-dom.development.js:5134
LoginPage.jsx:79 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
    at LoginPage.jsx:79