Question

我正在尝试为我创建的特定路线创建一个登陆页面。我希望它呈现一个导航栏，该导航栏的顶部具有指向不同页面的链接。我可以到达登录页面/tech-portal，导航栏将显示所有正确的链接，但是当我选择Page1时，它将导航到链接/tech-portal/page1，但未显示任何内容。当我选择链接时，我希望导航栏保留在页面上，仅更改在其下方呈现的内容。我该如何用已有的东西来做到这一点？

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路由，以使用render方法渲染TechPortalHome。这样，您就可以将Page1或Page2作为孩子传递给TechPortalHome。

或者您可以创建一条从/tech-portal/{content}到TechPortalHome的路线，在其中检索content参数，然后渲染适当的组件。

切换路线时未渲染导航栏

1 个答案: