Роут по умолчанию в ReactJS

Question

Господа, прошу помочь

        <div className="App">
        <BrowserRouter>
            <div className='menu'>
                <TopMenu />
            </div>
            <div>
                <Route path='/home' render={HomeContent}/>
                <Route path='/settings' render={SettingsContent}/>
                <Route path='/lk' render={LkContent}/>
                <Route path='/' render={MainContent}/>
            </div>
        </BrowserRouter>
    </div>

Есть приложение на React. В нём прописал простейшие ссылки на страницы TopMenu, и ест-но под каждую простейшие компоненты. Есть непонятка. при URL = / - всё хорошо. При других допустимых URL - отрисовывается все что надо + MainContent, т.к. он в адресе тоже есть. Переадресовывать на страницу с доп. параметром не вариант

Подскажите, как можно на отрисовывать MainContent если в адресе еще что то есть?

Answer 1

нужно указать, что путь к нему "exact"

<div className="App">
    <BrowserRouter>
        <div className='menu'>
            <TopMenu />
        </div>
        <div>
            <Route path='/home' render={HomeContent}/>
            <Route path='/settings' render={SettingsContent}/>
            <Route path='/lk' render={LkContent}/>
            <Route exact path='/' render={MainContent}/>
        </div>
    </BrowserRouter>
</div>

БЛОГ НА HUSL

Роут по умолчанию в ReactJS

Ответы (1 шт):