Question

我对React-router很陌生。我创建了一个带有导航栏的页面，该导航栏可以导航到两个页面之一。在其中一个页面中，我具有一系列链接，这些链接应直接指向另一个组件。我的应用程序组件处理初始路由

            <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>

然后home组件将呈现一个链接列表，我想将其完全导航到另一个组件。 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（找不到页面）

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 Bootstrap插件，

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';
`

ReactJS Router无法导航到指定组件

2 个答案: