How to properly inherit routes in React?

Question

React

How to properly set up route inheritance so that when you go to /user/message or /user/cart, it renders the component, and does not throw an error:

Refused to execute script from 'http://127.0.0.1:3000/user/bundle.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

This is how my index.js looks like.

<BrowserRouter>
                <Router>
                    <div className="none-container">
                        <Header/>
                        <Switch>
                            <Route exact path="/" component={App}/>
                            <Route path="/user" component={Authentication}/>                               //Точка входа в профиль
                            <Route path="/:id" component={Detail}/>
                        </Switch>
                    </div>
                </Router>
            </BrowserRouter>

Here is the Authentication component itself

<Profile profile={profile} auth={auth}/>
                    <Switch>
                        <Route path="/user/cart"
                               render={() => <Cart profile={profile} auth={auth} AppActions={this.props.AppActions}
                                                   getCart={getCart}/>}/>
                        <Route path="/user/message"
                               render={() => <Message message={message} auth={auth}
                                                      AppActions={this.props.AppActions} dispatch={this.props.dispatch} />}/>
                    </Switch>

The /user route renders fine on update, but the route inside the second /user/message switch does not