如何使用不同的路线进行反应？

Question

Could anyone help me with this question?

I'm a bit lost when using different routes containing subroutes.

I am trying to add routes with different paths.

I would like to have a default route with all the features and an alternate Event route separately.

From now on I am grateful for the attention and thank you very much.

index.js

Contains the two different routes. Layout and Event. The Route Layout contains another Routes component inside.

const Root = (
        <BrowserRouter>
            <Route component={App}>
                <Route component={Layout}/>
            </Route>
            <Route path="/event/:id" component={Event}/>
        </BrowserRouter>
)
ReactDOM.render(Root , document.getElementById('root'));

App.js

Component to be loaded. Layout or Event

class App extends Component {
  render() {
      const { children } = this.props;
      return (
          <div>{children}</div>
    );
  }
}
export default App;

RouterLayout.js --> This route is a subroute that is inside the Layout

const Router = () => (
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
    </Switch>
)

export default Router

Layout.js

class Layout extends Component {
      render() {
          const { children } = this.props;
          return (
              <Content className="column is-8 content-page">
                                    <RouterLayout/>
                                    <div>{children}</div>
                                </Content>
        );
      }
    }
    export default Layout;

Answer 1

I was able to solve this way

 <BrowserRouter>
            <div>
                <Route exact path="/page/*" component={Layout}/>
                <Route exact path="/event/:id" component={EmptyLayout}/>
            </div>
        </BrowserRouter>