React-Router-Dom No effect when clicking <Link>

Question

Presently I'm having an issue with my Navigation bar. When I click it it does not even change the URL address.

Note: I'm just using the lastest version of react and react-router-dom": ^4.4.0-alpha.1 . No redux here.

Here is the index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
 import './index.scss'
 import { BrowserRouter as Router } from 'react-router-dom'

 ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Here is my App.js I cut a lot out for brevity.

 import React, { Component } from "react";
 import { Route, Switch } from "react-router-dom";
 import Home from "./Home";
 import Form from "./Form";
 import Navigation from "./Navigation";
 import About from "./About";

 class App extends Component {
   constructor(props) {
     super(props);
       this.state = {
          isLoggedIn: null
      };
     }

    render(props) {
     return (
      <div>
      <Navigation
      {...props}
        isLoggedIn={this.state.isLoggedIn}
       />
       <Switch>
        <Route exact path="/" component={Home} />
         <Route
           path="/about"
           render={() => {
            return <About />;
            }}
           />
          <Route 
            path="/story/create" 
            render={(props )=> {
            return <Form {...props} />;
            }} 
           />
         </Switch>
       </div>
      );
     }
    }

  export default App;

And Lastly, my Navigation.js

 import React from "react";
 import { Link } from "react-router-dom";
 import Login from './Login'
 import { Tab, Tabs } from "react-materialize";

 export default function Navigation(props) {
  const isLoggedIn = props.isLoggedIn;
   let loggedState;
   if (isLoggedIn) {
   loggedState = (
  <div>
    <Tab title="Profile">
    <Link to="/user/:id/profile">
      Profile
    </Link>
    </Tab>

    <Tab title="Log Out">
     <Link to="/logout" onClick={props.handleLogOut}>
        Log Out

    </Link>
    </Tab>
  </div>
);
} else {
loggedState = (
  <Tab title="Login">
  <Login
   isLoggedIn={props.isLoggedIn}
   handleLogIn={props.handleLogIn}
  />
  </Tab>
  );
  }
    return (
  <Tabs className="">
    <Tab title="Home">
     <Link to="/">
      Home
      </Link>

     </Tab>
  <Tab title="All Stories">
  <Link to="/all_stories">
    All Stories
  </Link>
  </Tab>
  <Tab title="Write a Story">
  <Link to="/story/create">
    Write A Story
  </Link>
  </Tab>
  {loggedState}
</Tabs>
 )}

I think it would be helpful to mention that this issue is contain only to my navbar (functional) component. I have <Link> 's linking to other pages on my app they work just fine, it is only this one that is giving an issue.

I originally thought it was because I wasn't using withRouter , but after looking around on StackOverflow, it seems that that is only needed when using react-redux .

I have also, considered downgrading react-router-dom , but I couldn't find any other posts on this issue that mentioned that. It seems that most others only have this issue because they did not do Route exact path="/" , but I think the way I did mine, it should still work correctly.

Thank you greatly in advance.

Answer 1

Probably, you're facing this issue because there is a click event listener with event.preventDefault() added to .tab or .tabs . You can fix it by taking one of the approaches below:

• move Link s outside of .tab / .tabs
• get rid of preventDefault or remove tabs eventListener itself
• use a tab component instead (for example react-tabs )

BTW, I don't see any need for tabs in your case.