ReactJS Router无法导航到指定组件

Question

I am pretty new to react-router. I created a single page with nav bars that can navigate to the either of two pages. In one of the pages, I have a series of link that should direct to another component. My app component deals with the initial routing

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

then the home component renders a list of links I want to navigate to another component entirely. PS : this is not about nest routing

my list of links code is

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

But then my routes is linking the individual links to my 404 (not found page)

Answer 1

try this.

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>
    );
}

And the component that have Router

<Router>
   ...
<Switch>
    <APIRoutes />
    <Route exact path='/' component={Home}/>
    <Route path='/pages/Contact' component={Contact}/>
    <Route component={NotFoundPage}/>
</Switch>
</Router>

Answer 2

Try this it worked for me ,

User Navbar React bootstrap plugin for the menu bar navigation ,

npm package: import {Navbar, Nav,NavItem, NavDropdown, MenuItem,Glyphicon, Label} from 'react-bootstrap';

`

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