'react-router-bootstrap linkcontainer
How do I use react-router-bootstrap to link to another react component? Do I need to set up my routes with react-router first? I don't know how to use react-router-bootstrap's LinkContainer to route a NavItem to a separate react component.
import React, { Component } from 'react';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import request from 'superagent';
import CardList from './CardList.jsx';
import AddNewCard from './AddNewCard.jsx';
import ReactRouterBootstrap, { LinkContainer } from 'react-router-bootstrap';
const propTypes = {
children: React.PropTypes.element,
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
cards: [],
}
this.addNewCardHandler = this.addNewCardHandler.bind(this);
this.deleteCardHandler = this.deleteCardHandler.bind(this);
this.saveButtonHandler = this.saveButtonHandler.bind(this);
}
componentDidMount() {
this.getAllCards();
}
getAllCards() {
const url = '/api/cards';
request.get(url)
.end((err,res) => {
if (err) {
console.log(`err: ${err}`);
}
this.setState({
cards: res.body,
});
});
}
deleteCardHandler(id) {
console.log(`id: ${id}`);
}
addNewCardHandler() {
request.post(url)
.send({
firstname,
lastname,
email,
phonenumber,
location,
jobtitle,
company,
githubhandle,
linkedinhandle,
twitterhandler,
personalsite,
})
.end((err, res) => {
console.log(`res: ${res}`);
console.log(`err: ${err}`);
})
}
saveButtonHandler(){
console.log('saveButtonHandler')
}
render() {
return (
<div>
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<a href="#">BIZIT</a>
</Navbar.Brand>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Filter</NavItem>
<NavItem eventKey={2} href="#">Search</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Sign Up</NavItem>
<NavItem eventKey={2} href="#">Login</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<CardList
saveButtonHandler={this.saveButtonHandler}
cards={this.state.cards}
/>
<Navbar inverse collapseOnSelect fixedBottom>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={4} href="#">Home</NavItem>
<NavItem eventKey={5} href="#">Profile</NavItem>
<LinkContainer to="/AddNewCard">
<NavItem eventKey={6}>Add Card</NavItem>
</LinkContainer>
<NavItem eventKey={7} href="#">Saved Cards</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
App.propTypes = propTypes;
export default App;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>Solution 1:[1]
I just faced the same problem here. Yes you do have to set up react-router as if you were not using react-router-bootstrap. For your application (guessing you just want same level paths with the NavItens u set) I think it will be something like this (assuming that you're rendering your app's component in a div with id="app"):
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="/Filter" component={Filter} />
<Route path="/Signup" component={Signup} />
<Route path="/Login" component={Login} />
<Route path="/Profile" component={Profile} />
<Route path="/Search" component={Search} />
<Route path="/AddNewCard" component={AddNewCard} />
<Route path="/SavedCard" component={SavedCard} />
</Route>
</Router>
), document.getElementById('app'))
You have to put react-bootstrap's NavItens inside react-router-bootstrap's LinkContainers. If you have an index link you should use IndexLinkContainers instead. But if you want a link in your Navbar.Brand(which is your case), the best solution I found was to replace the Navbar.Brand for a react-router Link with className='nav-bar-brand'.
This is how I guess your solution should be:
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Link to='#' className='navbar-brand'>BIZIT</Link>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to="Filter">
<NavItem eventKey={1}>Filter</NavItem>
</LinkContainer>
<LinkContainer to="Search">
<NavItem eventKey={2}>Search</NavItem>
</LinkContainer>
</Nav>
<Nav pullRight>
<LinkContainer to="/Signup">
<NavItem eventKey={1}>Sign Up</NavItem>
</LinkContainer>
<LinkContainer to="/Login">
<NavItem eventKey={2}>Login</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
<CardList
saveButtonHandler={this.saveButtonHandler}
cards={this.state.cards}
/>
<Navbar inverse collapseOnSelect fixedBottom>
<Navbar.Collapse>
<Nav>
<LinkContainer to="/">
<NavItem eventKey={4}>Home</NavItem>
</LinkContainer>
<LinkContainer to="/Profile">
<NavItem eventKey={5}>Profile</NavItem>
</LinkContainer>
<LinkContainer to="/AddNewCard">
<NavItem eventKey={6}>Add Card</NavItem>
</LinkContainer>
<LinkContainer to="/SavedCard">
<NavItem eventKey={7}>Saved Cards</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
Solution 2:[2]
If you don't need react-router-bootstrap, you may use
import { BrowserRouter, Routes, Route } from "react-router-dom";
...
ReactDOM.render(
<BrowserRouter>
<Navigation />
<Routes>
<Route path="/path" element={<Path_Function />} />
</Routes>
</BrowserRouter>,
document.getElementById('root')
);
While inside navigation
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Outlet, NavLink } from 'react-router-dom';
...
<Nav.Link as={NavLink} to="/path">Path Name</Nav.Link>
...
Solution 3:[3]
Please be aware that every Link including NavLinks and LinksContainers must be a child to Router component. My problem was in placing the nav outside the router as a standalone component.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Henrique Vieira |
| Solution 2 | Hank W |
| Solution 3 | cigien |