I'm using Reactstrap and React-router 4.0.0-beta.6 in the educational project that is located on gitlab with custom domain.
According to Reactstrap docs: that's the way I should use active navlink
import { NavLink } from 'reactstrap'
...
<NavLink href="#" active = true >Link< /NavLink>
According to React-router v4 docs:
import { NavLink } from 'react-router-dom'
...
<NavLink to="/about" activeClassName="active">About</NavLink>
So how should I do implement navlink active state and use react-router?
To use both, you'll need to rename one of those imports and use the tag prop in reactstrap NavLink. You won't be able to use the active prop on reactstrap NavLink because that logic exists in react router NavLink.
Here's what it should look like:
import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';
<NavLink to="/about" activeClassName="active" tag={RRNavLink}>About</NavLink>
More info here: https://github.com/reactstrap/reactstrap/issues/336
By default active class is used. You can simply use exact boolean property to match the exact path.
import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';
<NavLink exact to="/about" tag={RRNavLink}>About</NavLink>
Have a look on the source code of react-router.NavLink component: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Since you are using reactstrap to handle styling for the navbar, you don't, and shouldn't need to rely on NavLink from react-router to do the same thing.
You can use Link from react-router instead, which deals with the routing only, and doesn't add the 'active' className when it is selected. But that's fine, because bootstrap's NavLink will do the styling for you.
import { NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
<NavLink><Link to="/about">About</Link></NavLink>
My advice is to avoid <Link>, <NavLink>, and tag all together when working with React Router v4 and Reactstrap (Bootstrap). I really think all three should be deprecated, especially the tag attribute. Trying to mix-in React Router's <Link> and <NavLink> into Reactstrap components leads to unforeseen style issues with Bootstrap (for example: https://github.com/reactstrap/reactstrap/issues/562).
I've found that from a style standpoint, it's better to use the React Router v4 <Route> component, and pass the history prop to the Reactstrap component.
import { Route } from 'react-router-dom';
import { Button } from 'reactstrap';
<Route
render={props =>
<Button role="button"
onClick={() => props.history.push("/endpoint")}>
</Button>}
/>
I use something like this :
<NavLink to="/about" active={window.location.hash === '/about'}>About</NavLink>
I had the exact prop in react-router 4.3.1 route but also needed to add exact to reactstrap 7.0.2 NavLink to prevent base route from being shown as active at all other child routes.
import { Link, NavLink as RRNavLink, withRouter } from "react-router-dom";
import { NavItem, NavLink } from "reactstrap";
<NavItem>
<NavLink to="/" activeClassName="active" exact tag={RRNavLink}>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink to="/some-route" activeClassName="active" tag={RRNavLink}>
Some Text
</NavLink>
</NavItem>
Related
While clicking on the links updates the slug, I have to manually refresh the page in order to get the page content to update.
app.js:
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavigationContainer from './titlebar';
import AllLinks from './all-links';
import Home from './home';
export default class App extends Component {
render() {
return (
<div className='app'>
<NavigationContainer />
<Router>
<Switch>
<Route path="/all-links" component={AllLinks} />
<Route exact path="/" component={Home} />
</Switch>
</Router>
</div>
);
}
}
titlebar.js:
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
export default class NavigationContainer extends Component {
render() {
return (
<div className="navigation-container">
<div className="text-wrapper">
<div className="nav-left">
<NavLink exact to="/">
Redis Link Shortener
</NavLink>
</div>
<div className="nav-right">
<NavLink to="/all-links" >
All Links
</NavLink>
</div>
</div>
</div>
)
}
}
I've tried going through documentation, going through similar questions, and going through code I've written in the past that does work in this regard. As far as I can tell, what I'm using is identical to code I've written in the past that has worked. I'm completely stuck for why it isn't automatically rendering.
want to add class to font picker react. I tried with simple using class but it was not added.
version "font-picker-react": "^3.4.1",
import React from "react";
import FontPicker from "font-picker-react";
<FontPicker
apiKey="AIzaSyCrAmkqacuiyammyv400dq-l6QUNZkoMSE"
activeFontFamily={this.state.activeFontFamily}
onChange={(nextFont) =>
this.setState({
activeFontFamily: nextFont.family
})
}
/>
I'm using AntDesign component Anchor, with React Router. An error popped up saying
Identifier 'Link' has already been declared (77:8)
I understand that the Link has been declared twice, once for React Router, and the other for AntDesign's Anchor. Is there a way to circumvent this? I need both. The React Router is for routing, and the AntDesign's Anchor is for jumping to different sections on a page.
Here's the setup:
import React from 'react'
import { Link } from 'react-router-dom';
import Anchor from 'antd/es/anchor';
const { Link } = Anchor;
const View = () => {
return (
...//some code here
<Link to={{pathname: `/tutorial/${item._id}`}}>Item A</Link>
...//some code here
<Anchor affix={true} showInkInFixed={true} offsetTop={30}>
<Link href="#a" title="A"/>
<Link href="#b" title="B"/>
<Link href="#c" title="C"/>
</Anchor>
...//some code here
)
}
export default View
Either with the as keyword for the import e.g.
import { Link as Link1 } from 'react-router-dom';
or remove const { Link } = Anchor; and use Anchor.Link.
I have searched through different tutorials and multiple stackOverflow questions. And none of which, helped me solve a very basic problem:
Implement nested routes with react-router-dom
Here's my code so far:
App.js
<Route exact path="/home" name="Home" component={DefaultLayout} />
DefaultLayout.js
<Route path="/home/users" component={Users} />
When I go to /home/users, I get a blank screen because react-router-dom is looking-up the definition of that route inside App.js instead of searching it inside DefaultLayout.js..
So I have two questions:
QUESION 1: What am I doing wrong exactly?
QUESTION 2: How does react-router-dom know that it should look for the nested route inside DefaultLayout.js instead of inside App.js?
It has been two days and I still cannot solve this simple problem.
Any help is very much appreciated.
EDIT 1: I have started a new project just for the sake of implementing a very simple nested routing:
App.js
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import ParentComponent from "./nestedComponents/ParentComponent";
function App() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/home" name="Home" component={ParentComponent} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
ParentComponent.js
import React from "react";
import nestedComponentOne from "./nestedComponentOne";
import nestedComponentTwo from "./nestedComponentTwo";
import { Switch, Route } from "react-router-dom";
export default function ParentComponent() {
return (
<div>
PARENT COMPONENT
<Switch>
<Route path="home/nestedComponentOne" component={nestedComponentOne} />
<Route path="home/nestedComponentTwo" component={nestedComponentTwo} />
</Switch>
</div>
);
}
nestedComponentOne.js
import React from "react";
export default function nestedComponentOne() {
return <div>NESTED COMPONENT 1</div>;
}
nestedComponentTwo.js
import React from "react";
export default function nestedComponentTwo() {
return <div>NESTED COMPONENT 2</div>;
}
But, I still get a blank screen whenever I try to access a nested component...
You have this problem:
React-router urls don't work when refreshing or writing manually
The simplest fix is to replace the BrowserRouter with a HashRouter
when I started the project I did not work with create-react-app
I built the basic react-flux app like always which is with browserify and babelify and all
and the react-router v4 was working and no problem happened
then I immigrated to create-react-app env
to use the testing and building tools that is offered
and I installed all packages that I used previously properly
but react-router v4 had a problem
when I click NavLink, it does not change the URL
but when I change the URL manually it works fine
I use BrowserRouter like this:
<BrowserRouter history={HashRouter}<App /></BrowserRouter>,document.getElementById("root"));
And NavLink like this:
<NavLink className="nav-link" activeClassName="active" to={"/drugs"}>
<i className="fa fa-medkit" aria-hidden="false"/>
Drugs
</NavLink>
And Router like this:
<Switch>
<Route exact={true} path="/" component={Patients}/>
<Route exact path="/drugs" component={Drugs}/>
<Route exact path="/settings" component={Settings}/>
<Route path="*" component={Error}/>
</Switch>
and thanks in advance.
Most likely your component does not update properly. This can happen if you inherit from React.PureComponent instead of React.Component or mess up with the method shouldComponentUpdate().
If you can't figure it out (you should), you can still pass the location object manually with the HOC withRouter from react-router-dom like so :
import { withRouter } from 'react-router-dom';
const Menu = ({ location }) => (
<menu>
<NavLink
className="nav-link"
activeClassName="active"
location={location}
to="/drugs"
>
<i className="fa fa-medkit" aria-hidden="false" />
Drugs
</NavLink>
</menu>
);
export default withRouter(Menu);
Note: Most imports have been stripped out for clarity
The problem is <Navlink to={"/drugs"}. When you use {} You're indicating that you'll be using JS, and since "/drugs" is not valid js it fails.
Instead remove the {}.
<NavLink className="nav-link" activeClassName="active" to="/drugs">