React Router (v4) Navbar

Question

I am using V4 React-Router-DOM

I need to access this.props.matchin my component of the navigation bar so that I can set the active class. I use reactive materialization. In the tag <NavItem>I want to add className={this.props.match ? 'active' : ''}. However, I cannot access the match. Props is an empty object every time I print it in the console.

My Nav.js

<Navbar brand='Fuzic' href="/" className="orange darken-3" right>
  <NavItem className={this.match ? 'active' : ''} href="/devices">Devices</NavItem>
  <NavItem><Link to="/devices">Media</Link></NavItem>
  <NavItem><Link to="/devices">Alarms</Link></NavItem>
  <NavItem><Link to="/devices">Interrupts</Link></NavItem>
  <NavItem><Link to="/auth">Admin</Link></NavItem>
</Navbar>

My app.js

<BrowserRouter>
  <div>
    <Nav/>
    <div className="container">
      <Switch>
        <PropsRoute exact path="/" component={Auth}/>
        <PropsRoute exact path="/devices" component={Devices} devices={this.state.devices} setCurrentDevice={this.setCurrentDevice} />
        <PropsRoute path="/devices/:deviceId" component={Detail} currentDevice={this.state.currentDevice} />
        <PropsRoute path="/auth" component={Auth}/>
        <PropsRoute component={NotFound}/>
      </Switch>
    </div>
  </div> 
</BrowserRouter>

helper.js - combines the details I missed & the details transferred from the reaction router

// Exerp From:  https://github.com/ReactTraining/react-router/issues/4105
export const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return (
    React.createElement(component, finalProps)
  );
}

export const PropsRoute = ({ component, ...rest }) => {
  return (
    <Route {...rest} render={routeProps => {
      return renderMergedProps(component, routeProps, rest);
    }}/>
  );
}

Most of the documentation and articles on the Internet are for v2 and 3. The documents for v4 do not contain details on how to handle this. Many people have enclosed a route for their application. However, when I do this, I get a stack overflow in the console with frame printing.

, ?

Answer 1

Nav <NavLink> <Link> <NavLink>.

<NavLink> - <Link>, , URL.

<NavLink> activeClassName activeStyle, .

, :

<nav>
    <NavLink activeStyle={{color: 'red'}} to="/foo">Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/bar">Bar Group</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-foo">Another Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-bar">Another Bar</NavLink>
</nav>

activeStyle , , .

activeClassName:

<nav>
    <NavLink activeClassName="selected" to="/foo">Foo</NavLink>
    <NavLink activeClassName="selected" to="/bar">Bar Group</NavLink>
    <NavLink activeClassName="selected" to="/another-foo">Another Foo</NavLink>
    <NavLink activeClassName="selected" to="/another-bar">Another Bar</NavLink>
</nav>

activeClassName - , , . selected. response-router v4 active.

<NavLink> response-router v4

Answer 2

,
"react-router-dom": "^4.2.2"
"react-bootstrap": "^0.31.5"

import { Link } from 'react-router-dom';
import { NavBar, Nav, NavItem} from 'react-bootstrap';

const NavBar = ({location}) => (
    <NavBar>
        <Nav>
            <NavItem componentClass={Link} href="/artists" to="/artists" active={location.pathname === '/artists'}>Artists</NavItem>
            <NavItem componentClass={Link} href="/stages" to="/stages" active={location.pathname === '/stages'}>Stages</NavItem>
        </Nav>
    <NavBar>
// ...

location - a Route: https://reacttraining.com/react-router/web/api/location

, .

EDIT: , react-materialize, , , .

Answer 3

"": "^ 16.9.0" "": "^ 8.0.1"

import { NavLink} from "react-router-dom";
import { NavbarBrand} from "reactstrap";

 <NavLink 
  className="navbar-brand"
  activeClassName="active"
  tag={NavbarBrand}
  to='/'
  >
  My App
  </NavLink>

Answer 4

For those working with response-bootstrap v4 (currently using 1.0.0-beta.5) and response-router-dom v4 (4.3.1), just use the "as" prop from Nav.Link, here is a complete example :

import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'

<Navbar>
  {/* "Link" in brand component since just redirect is needed */}
  <Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
  <Nav>
    {/* "NavLink" here since "active" class styling is needed */}
    <Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
    <Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
    <Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
  </Nav>
</Navbar>

Here is a working example: https://codesandbox.io/s/3qm35w97kq