Навбар не отображается при переключении маршрутов

Question

Я пытаюсь создать целевую страницу для указанного маршрута c, который я создал. Я хочу, чтобы он отображал панель навигации со ссылками на разные страницы вверху. Я могу попасть на свою целевую страницу /tech-portal, и панель навигации отображается со всеми правильными ссылками, но когда я выбираю Page1, она переходит к ссылке /tech-portal/page1 без визуализации. Когда я выбираю ссылку, я хочу, чтобы панель навигации оставалась на странице и изменяла только содержимое, отображаемое под ней. Как я могу выполнить sh это с тем, что у меня уже есть?

Index. js

ReactDOM.render((
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={App}/>
            <Route path='/service' component={ServiceReport} />

            <Route exact path='/inventory' component={InventorySystem} />
            <Route path='/inventory/tracking' component={PartTracker} />
            <Route path='/inventory/build-assembly' component={BuildAssembly} />
            <Route path='/inventory/import-purchase-order' component={ImportPO} />
            <Route path='/inventory/update-item' component={UpdateItem} />
            <Route path='/inventory/create-item' component={CreateItem} />
            <Route path='/inventory/receive-items' component={ReceiveItem} />

            <Route exact path='/tech-portal'>
                <TechPortalHome>
                    <Route path='/tech-portal/page1' component={Page1} />
                    <Route path='/tech-portal/page2' component={Page2} />
                </TechPortalHome>
            </Route>


        </Switch>
    </BrowserRouter>), document.getElementById('appRoot'));

TechPortalHome. js

import React from 'react'
import '../../StyleSheets/TechPortal.css';
import NavBar from '../../components/NavBar';


export default class TechPortalHome extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return(
            <div>
                <NavBar></NavBar>
                {this.props.children}
            </div>
        )
    }
}

NavBar. js

import React from 'react'
import '../StyleSheets/TechPortal.css';
import Logo from '../../public/Images/Logo.png';
import {Link} from 'react-router-dom';


export default class NavBar extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return(
            <div>
                <div className="headerdiv">
                    <div className='ImageDiv'>
                        <a href="../tech-portal">
                            <img className='LogoImage' name='Logo' src={Logo} alt="" />
                        </a>

                    </div>
                </div>

                <div className="navbar">
                    <a>Home</a>
                    <Link to="/tech-portal/page1">Page1</Link>
                    <Link to="/tech-portal/page2">Page2</Link>
                    <a>Login</a>
                </div>
            </div>
        )
    }
}

Я искал в Интернете что-то похожее, но многие вещи устарели или плохо объясняют это. Если кто-нибудь даст мне несколько советов о том, как я могу сделать эту работу, это было бы здорово. Спасибо!

РЕДАКТИРОВАТЬ

Изменение exact path на path в моем /tech-portal маршруте работает правильно. Маршруты изменены, и содержимое отображается под панелью навигации. Любопытно посмотреть, что другие люди думают о подходе, прежде чем закрывать это обсуждение.

Answer 1

Я не уверен, что вы должны вложить такие маршруты. Вы можете создать маршруты /tech-portal/page1 и /tech-portal/page2 для визуализации TechPortalHome с использованием метода render. Таким образом, вы можете передать Page1 или Page2 в качестве дочерних элементов к TechPortalHome.

. Или вы можете создать маршрут типа /tech-portal/{content} до TechPortalHome, получить там параметр content и затем визуализируем соответствующий компонент.