亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJS 路由器沒有導航到指定的組件

ReactJS 路由器沒有導航到指定的組件

郎朗坤 2022-01-13 10:50:17
我對反應路由器很陌生。我創建了一個帶有導航欄的頁面,可以導航到兩個頁面中的任何一個。在其中一個頁面中,我有一系列鏈接應該指向另一個組件。我的應用程序組件處理初始路由            <Router>                    <nav className ="nav">                        <Link to='/' className="nav__nav-link-logo link"><img src={Logo} className="nav__nav-logo" alt="A figure that depicts school"></img></Link>                        <button onClick={this.handleBarClick} className="nav__nav-bar-icon link"><FontAwesomeIcon icon={faBars} /></button>                        <div className="nav__text-and-icon" style={{display : this.state.navTextDisplay}}>                            <Link to = '/' className="nav__text link"><FontAwesomeIcon icon={faHome} className="icon" />  Home </Link>                            <Link to = '/pages/Contact/Contact' className="nav__text link"><FontAwesomeIcon icon={faPhoneAlt} className="icon"/>  Contact the Dev</Link>                        </div>                    </nav>                    <Switch>                        <Route exact path='/' component = { Home } />                        <Route exact path='/' component = { Home } />                        <Route path='/pages/Contact' component = { Contact } />                        <Route component={NotFoundPage}/>                    </Switch>           </Router>然后主組件呈現我想要完全導航到另一個組件的鏈接列表。PS:這與嵌套路由無關但后來我的路線將各個鏈接鏈接到我的 404(未找到頁面)
查看完整描述

2 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

試試這個。


class APIRoutes extends React.Component {

 ...

 render() {

    return (

        <Switch>

            {this.state.apiResponse.map((item, index) => {

                return (

                    <Fragment>

                        ...

                        <Route

                            path="/component/SchoolDetails"

                            render={props => (

                                <SchoolDetails {...props} details={item} />

                            )}

                        />

                    </Fragment>

                );

            })}

        </Switch>

    );

}

并且具有的組件 Router


<Router>

   ...

<Switch>

    <APIRoutes />

    <Route exact path='/' component={Home}/>

    <Route path='/pages/Contact' component={Contact}/>

    <Route component={NotFoundPage}/>

</Switch>

</Router>


查看完整回答
反對 回復 2022-01-13
?
鳳凰求蠱

TA貢獻1825條經驗 獲得超4個贊

試試這個對我有用,


用于菜單欄導航的用戶 Navbar React 引導插件,


npm 包:從 'react-bootstrap' 導入 {Navbar, Nav,NavItem, NavDropdown, MenuItem,Glyphicon, Label};


`


</Navbar.Header>


<Navbar.Collapse>


    <Nav>

        <NavItem eventKey={1} href="#/Dashboard">

            Dashboard

        </NavItem>


        <NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">

            <MenuItem eventKey={3.1}>

                <NavLink exact to={ "/Home"}>Home</NavLink>

            </MenuItem>

            <MenuItem eventKey={3.2}>

                <NavLink exact to={ "/Gallary"}>Gallary</NavLink>

            </MenuItem>

    </Nav>

    </NavDropdown>

</Navbar.Collapse>

  <NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">

    <MenuItem eventKey={3.1} ><NavLink exact to={"/Home"} >Home</NavLink></MenuItem>

    <MenuItem eventKey={3.2}><NavLink exact to={"/Gallary"}>Gallary</NavLink></MenuItem>  

</Nav>


npm package:


 import {Route, BrowserRouter,NavLink,HashRouter , Switch} from 'react-router-dom';


`


查看完整回答
反對 回復 2022-01-13
  • 2 回答
  • 0 關注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號