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本身
改为使用制表符组件（例如react-tabs）

顺便说一句，我认为您不需要tabs。

React-Router-Dom单击<link />时不起作用

1 个答案: