I am building a React application and using React Router to control routing. The information architecture of the application can be represented as follows:
- App
- Projects
- Project 1
- Objects
- Object 1
- Object 2
- etc...
- Collaborators
- ...
- Services
- Users
The user interface of the application will look something like this if you look at a route such as /#/projects/1/components/1
-----------------------------------------------------------
| | Home > Projects > 0 > Object > 1 |
| Home |--------------------------------------------|
| | |
| Projects | Object 1 |
| | |
| Services | Blah blah blah |
| | |
| Users | |
| | |
-----------------------------------------------------------
Please note that for any given route shown in the information architecture diagram above, the view should be displayed in the body section (where “Component 1” is displayed in the diagram above).
Now I will describe how I mistakenly implemented this in React using the React Router:
I used PlainRoutes to determine my routes. Here is a brief example of how a route is determined:
const routes = [
{
path: '/',
component: App,
name: 'Home',
childRoutes: [
// /projects
{
path: 'projects',
component: Projects,
name: 'Projects'
},
{
path: 'projects/:projectid',
component: ProjectDetails,
name: 'Project Details',
childRoutes: [
{
path: 'objects',
component: Objects,
name: 'Objects'
},
{
path: 'objects/:objectid',
component: ObjectDetails,
name: 'Object Details'
},
{
path: 'collaborators',
component: Collaborators,
name: 'Collaborators'
}
]
},
// /services
{
path: 'services',
component: Services,
name: 'Services'
},
// /users
{
path: 'users',
component: Users,
name: 'Users'
}
]
}
];
which are then passed to the React Router component, for example: <Router routes={routes}></Router>
. :
/#/projects
Projects, .
:
/#/projects/1
ProjectDetail, .
, :
/#/projects/1/objects
ProjectDetail, . , , /projects/:projectid , , /projects/:projectid/objects.
, , React Router . , , . , , . , , React Router, childRoutes.
, React Router, , , ? , ( , ), . ?