2 回答

TA貢獻1893條經驗 獲得超10個贊
試試這個。
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>

TA貢獻1825條經驗 獲得超4個贊
試試這個對我有用,
用于菜單欄導航的用戶 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';
`
添加回答
舉報