ReactJS 路由器没有导航到指定的组件

Question

我对反应路由器很陌生。我创建了一个带有导航栏的页面，可以导航到两个页面中的任何一个。在其中一个页面中，我有一系列链接应该指向另一个组件。我的应用程序组件处理初始路由            <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（未找到页面）

Answer 1

试试这个。

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>

Answer 2

试试这个对我有用，

用于菜单栏导航的用户 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';

`