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 {&nbsp;...&nbsp;render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.apiResponse.map((item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path="/component/SchoolDetails"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render={props => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SchoolDetails {...props} details={item} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; );}并且具有的组件 Router<Router>&nbsp; &nbsp;...<Switch>&nbsp; &nbsp; <APIRoutes />&nbsp; &nbsp; <Route exact path='/' component={Home}/>&nbsp; &nbsp; <Route path='/pages/Contact' component={Contact}/>&nbsp; &nbsp; <Route component={NotFoundPage}/></Switch></Router>

Answer 2

试试这个对我有用，用于菜单栏导航的用户 Navbar React 引导插件，npm 包：从 'react-bootstrap' 导入 {Navbar, Nav,NavItem, NavDropdown, MenuItem,Glyphicon, Label}；`</Navbar.Header><Navbar.Collapse>&nbsp; &nbsp; <Nav>&nbsp; &nbsp; &nbsp; &nbsp; <NavItem eventKey={1} href="#/Dashboard">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dashboard&nbsp; &nbsp; &nbsp; &nbsp; </NavItem>&nbsp; &nbsp; &nbsp; &nbsp; <NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem eventKey={3.1}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <NavLink exact to={ "/Home"}>Home</NavLink>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MenuItem>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem eventKey={3.2}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <NavLink exact to={ "/Gallary"}>Gallary</NavLink>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </MenuItem>&nbsp; &nbsp; </Nav>&nbsp; &nbsp; </NavDropdown></Navbar.Collapse>&nbsp; <NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">&nbsp; &nbsp; <MenuItem eventKey={3.1} ><NavLink exact to={"/Home"} >Home</NavLink></MenuItem>&nbsp; &nbsp; <MenuItem eventKey={3.2}><NavLink exact to={"/Gallary"}>Gallary</NavLink></MenuItem>&nbsp;&nbsp;</Nav>npm package:&nbsp;import {Route, BrowserRouter,NavLink,HashRouter , Switch} from 'react-router-dom';`