How to make a dynamic route for the main page?

Question

React

Hello! Unable to display content correctly with route. The logic of the site is such that on the main page there will be a component in which there is a component (should be constantly displayed) and a block with filtered content, in which apartment cards are displayed . Filters are links and the name of the filter is added to the url. Those. path for main can be either '/' or '/1-k', '/2-k' etc.<MainContainer/><Filters/><Card/>

const filters = [
    {name: 'все', url: ''},
    {name: '1-ком', url: '1-k'},
    {name: '2-ком', url: '2-k'},
    {name: '3-ком', url: '3-k'},
]

function App(props) {
    return (
        <BrowserRouter >
            <div className="container">
                <Header />
                <div className="content">
                    <Switch>
                            <Route exact path={`/`} render={(props) => <MainContainer {...props}/>} /> //главная
                            <Route path={`/object/:id`} render={(props) => <HousingContainer {...props} /> } /> //детальная
                            <Route render={(props) => <Page404 {...props} /> }/>
                        </Switch>
                    </div>
            </div>
        </BrowserRouter>
)}

If a

<Route exact path={`/`} render={(props) => <MainContainer {...props}/>} />

, then content is shown when the filter "all" is selected, but if you select the filter "1-com" or others, it will open a 404 page.
If a

<Route exact path={`/:filter`} render={(props) => <MainContainer {...props}/>} />

, then everything is ok with other filters, but if you select the "all" filter, it will be 404 pages.

How to correctly set the path for the main one in this case?

Answer 1

For such things, get-parameters are used in the url. That is, the url of the form domain.ru/page?1-k
AND in the routing does not need to be registered separately