React-Router-Dom單擊時不起作用<Link>

Question

目前，我的導航欄有問題。 當我單擊它時，它甚至都不會更改URL地址。

注意：我只是使用最新版本的react和react-router-dom": ^4.4.0-alpha.1 。這里沒有redux。

這是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'));

為了簡潔起見，這是我的App.js

 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;

最后，我的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>
 )}

我認為提及此問題僅包含在我的導航欄（功能性）組件中會很有幫助。 我有<Link>鏈接到我的應用程序上的其他頁面，它們工作得很好，只有這一個問題。

我最初以為是因為我沒有使用withRouter ，但是在StackOverflow上瀏覽后，似乎只有在使用react-redux時才需要。

我也考慮過將react-router-dom降級，但是我找不到關於此問題的任何其他文章。 似乎其他大多數人都遇到了這個問題，因為他們沒有執行Route exact path="/" ，但是我認為我的挖掘方法仍然可以正常工作。

預先感謝您。

Answer 1

您可能正面臨此問題，因為有一個click事件偵聽器，其中將event.preventDefault()添加到.tab或.tabs 。 您可以通過以下方法之一對其進行修復：

• 將Link移到.tab / .tabs
• 擺脫preventDefault或除去選項卡eventListener本身
• 改用tab組件（例如react-tabs ）

順便說一句，我認為您不需要任何tabs 。