Javascript 单击时不起作用<；链接>；

目前我的导航栏有问题。当我点击它时，它甚至不会改变URL地址

注意：我只使用了

react

和

react路由器dom的最新版本：^4.4.0-alpha.1

。这里没有重复

这是

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

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

最后，我的

Navigation.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'));

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

从“React”导入React；
从“react router dom”导入{Link}；
从“./Login”导入登录名
从“react materialize”导入{Tab，Tabs}；
导出默认功能导航（道具）{
const isLoggedIn=props.isLoggedIn；
让loggedState；
如果（isLoggedIn）{
日志数据状态=(
轮廓
注销
);
}否则{
日志数据状态=(
);
}
返回(
家
所有故事
写故事
{loggedState}
)}

我想提及这个问题是有帮助的，它只包含在我的导航栏（功能）组件中。我有

链接到我的应用程序上的其他页面，它们工作得很好，只有这个问题

我最初认为这是因为我没有在路由器上使用

，但在查看StackOverflow之后，似乎只有在使用
react redux
时才需要它

我也考虑过降级
react router dom
，但我找不到关于这个问题的任何其他帖子。似乎大多数其他人只有这个问题，因为他们没有
Route-exact-path=“/”
，但我认为我的方式应该仍然可以正常工作

非常感谢您。
可能您正面临此问题，因为有一个
单击
事件侦听器将
事件.preventDefault（）
添加到
.tab
或
.tabs
。您可以通过以下方法之一解决此问题：


将
链接
s移出
.tab
/
.tabs
摆脱
preventDefault
或删除选项卡
eventListener
本身
改用选项卡组件（例如）

顺便说一句，在你的情况下，我认为没有必要使用
选项卡
。
请求选项卡的样式。假设可能有一些
指针事件：无
，例如，谢谢你的帮助。我刚刚更新了你的建议，但是当我将链接环绕在选项卡上时，仍然没有发生任何事情，你可以在G的底部看到链接更改oogle chrome，但不在URL中，所以我将标签环绕在链接上，我得到了一种特殊的效果，可以在这里看到这种效果，它显示了要点击的链接文本，这实际上是链接到页面的。只需去掉
标签，你不需要它们。标签就是将样式附加到我的网站上的东西，我希望会有如果您正在构建单页应用程序，请将链接合并到它们中，而不重新加载页面。不会重新加载整个页面，就像您正在使用
。要应用样式，只需为您的
链接提供
样式
或
类名
道具即可：