Separating two different UI in react application

Question

I want to build a react application where there will be two types of UI, one for admin and other for user. All the files included in header and footer will be separate. how can I achieve this?

Approach 1
Creating two separate application for admin and user like example.com for user and admin.example.com So that I can include all the css and js files of respective design in index.html

Approach 2
Integrating in one application where url will be example.com for user and example.com/admin for admin. but then my question is where will the asset file will in included for both user and admin where the respective template will be created.

Please help and pardon me if the question framing is not correct.

Answer 1

Both these are equally good. Would recommend method 2 if there is any common data or function between them

Answer 2

The second approach looks better to me.

Where to include assets and where to create the template? Have all the Components (admin + user components)in the Components folder, and in App.js, while defining the routing, provide components to routes accordingly. For example:

for path="/", it should provide component <UserHome/>

for path="/admin/", it should provide <AdminHome/>

Hope that answers your question.