Routing with routers not working in react js

Question

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)`

Muhammad Bilal · Accepted Answer · 2018-09-30 08:17:08Z

2

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>

answered Sep 30, 2018 at 8:17

Muhammad Bilal

3413 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tested Over a year ago

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

Raushan · Accepted Answer · 2018-09-30 09:51:18Z

2

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>

edited Sep 30, 2018 at 9:51

answered Sep 30, 2018 at 8:40

Raushan

936 bronze badges

6 Comments

shyam agarwal Over a year ago

yes right you can directly usenavlink and using activeClassName property to style active link components.

Tested Over a year ago

this is not working out not redirecting to the specified page nor reflecting as links

Raushan Over a year ago

@Tested are you getting any error in console? Also please make sure you have imported all the dependencies.

Raushan Over a year ago

@Tested try replacing "disable" with "disabled" in <DropdownItem disable> action1</DropdownItem> component

Tested Over a year ago

thats not the issue this is the issue -->Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

|

Collectives™ on Stack Overflow

Routing with routers not working in react js

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related