CODEWITHSUNDEEP
reactjsreact-router-dom
Tested
Tested

Reputation: 789

Routing with routers not working in react js

I am working with routers providing routing links to the nav menu but then it seems to be not working in my index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
 import Home from './Home';
  import ContactUs from './ContactUs';

  ReactDOM.render((
  <Router >
    <Route path="/" component={App}>           
       <Route path="Home" component={Home}/>
       <Route path="ContactUs" component={ContactUs}/>
    </Route>
   </Router>
  ), document.getElementById('root'));
   registerServiceWorker();

In my app.js I have my following links I am using react bootstrap with react in render function

   <Nav>
      <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
          <DropdownToggle nav caret>
              Dropdown
          </DropdownToggle>
          <DropdownMenu>
                <DropdownItem header>action</DropdownItem>                    
                <DropdownItem divider/>
                <DropdownItem disable> action1</DropdownItem>
          </DropdownMenu>                  
      </Dropdown>
      <NavItem>
           <NavLink>
              <Link to="Home">Home </Link>
           </NavLink>
       </NavItem>
       <NavItem>
          <NavLink>
            <Link to="ContactUs">ContactUs</Link>
          </NavLink>
       {this.props.children}
    </Nav>

it doesn't throw any error too, is this the correct way m doing? Any help will be appreciated.

using link shows up onto the url butthen it doesnt redirect to that page showing its contents

error

index.js:2178 Warning: You should not use <Route component> and <Route 
 children> in the same route; <Route children> will be ignored
 Warning: Received `true` for a non-boolean attribute `disable`.

 If you want to write it to the DOM, pass a string instead: disable="true" or disable={value.toString()}.
in button (created by DropdownItem)
in DropdownItem (at App.js:39)
in div (created by DropdownMenu)
in DropdownMenu (at App.js:36)
in li (created by Manager)
in Manager (created by Dropdown)
in Dropdown (at App.js:32)
in ul (created by Nav)
in Nav (at App.js:31)
in div (at App.js:26)
in App (created by Route)
in Route (at src/index.js:13)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:12)`

Upvotes: 0

Views: 388

Answers (2)

Raushan
Raushan

Reputation: 93

UPDATE

In latest version, Route component doesn't allow nested route, using Switch works in this case. Updated Route would be as follows:

<Router>
<Switch>
    <Route exact path="/" component={App}>           
       <Route path="/home" component={Home}/>
       <Route path="/contact-us" component={ContactUs}/>
    </Route>
<Switch>
   </Router>

You have missed the path linking in NavLink's "to" property, the following should work for you:

<NavItem>
      <NavLink to="/Home">Home</NavLink>
       </NavItem>
       <NavItem>
       <NavLink to="/ContactUs">ContactUs</NavLink>
</NavItem>

Moreover, it's better that route defined in Route config be in lowercase:

<Router>
    <Route path="/" component={App}>           
       <Route path="home" component={Home}/>
       <Route path="contact-us" component={ContactUs}/>
    </Route>
</Router>

Also, the official docs https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md says:

<NavLink> is a special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL.

Therefore, there's no need to put <Link> inside <NavLink>

Upvotes: 2

Muhammad Bilal
Muhammad Bilal

Reputation: 341

You are not using react-router-dom Link component due to which routing links are not working. you can do something like this: 

<NavLink>
<Link to='Home'>Home<Link>
</NavLink>

Upvotes: 2

Related Questions