1

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

            <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：这与嵌套路由无关

我的链接代码列表是

      render() {
        return (
            <Fragment>
                {/**
                 * @param item the indiviual school generated from the API
                 */}
                {this.state.apiResponse.map((item, index) => {
                    return (
                        <Fragment>
                            <li key={item.schoollid}>
                                <Link
                                    to="/component/SchoolDetails/SchoolDetails"
                                    className="each-school"
                                >
                                    <SchoolTemplate item={item} />
                                </Link>
                            </li>
                            <Route
                                path="/component/SchoolDetails"
                                render={props => (
                                    <SchoolDetails {...props} details={item} />
                                )}
                                // component={SchoolDetails}
                            />
                        </Fragment>
                    );
                })}
            </Fragment>
        );

但后来我的路线将各个链接链接到我的 404（未找到页面）

4

2 回答 2

0

试试这个对我有用，

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

于 2019-11-27T09:19:48.537 回答
0

尝试这个。

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>
于 2019-11-27T09:01:33.623 回答