相关疑难解决方法(0)

随着react-router我可以使用Link元素创建的原生处理反应路由器链接.

我看到内部调用this.context.transitionTo(...).

我想进行导航,但不是从链接,例如下拉选择.我怎么能在代码中这样做？什么是this.context？

我看到了Navigationmixin,但是我可以不用mixin吗？

我安装了react-router-dom v6，我想使用基于类的组件，在以前版本的react-router-dom v5中，this.props.history()在执行某些操作后可用于重定向页面，但此代码不适用于 v6 。

在react-router-dom v6中有一个useNavigate功能组件的钩子，但我需要在类基础组件中使用它，请帮助我如何在类组件中使用导航？

我一直在尝试在单击按钮时对另一个组件进行简单的重定向，但由于某种原因它不起作用。我想重定向到“/仪表板”并从登录显示 AdminServices，如下所示：

//index.js

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, 
    document.getElementById("root"));

//App.js

     <Switch>
          <Route path="/" component={Login} />
          <Route path="/dashboard" component={AdminServices} />
        </Switch>

//登录.js

<Button
onClick={this.login}
>
</Button>

login = () =>{
    <Redirect to="/dashboard" />
  }

//AdminServices.js

render(){
        return(
            <div>Test</div>
        );
    }

我试图从“react-router-dom”导入 useHistory，但是，我收到此错误：导入错误：“useHistory”未从“react-router-dom”导出。

我还检查了其他答案，例如尝试导入错误：“useHistory”未从“react-router-dom”导出，但无济于事。我的 package.json 看起来像这样

我正在使用 useHistory 本身，

import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

export default function Login(){
    const history = useHistory();
    console.log(history)
}

然而，这条线工作正常，不会导致从react-router-dom导入问题。

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

有谁知道如何解决这个问题？非常感激。

我正在实施一个新的应用程序。目前，我可以为链接进行导航，而无法为按钮单击导航进行导航。我已经检查了这篇文章并尝试了 BrowserHistory 选项。但目前不支持此方法。

代码：

import React, { Component } from "react";
import {Route,Router,NavLink,HashRouter,BrowserRouter} from "react-router-dom";
import Contact from "./components/Contact";
import Home from "./components/Home";
import EnquiryResult from "./components/EnquiryResult";
import logo from './logo.svg';
import './App.css';

class MainStack extends Component {

  onClick(){
   // browserHistory.push("/EnquiryResult");
}

  render() {
    return (
        <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div>
          <button className="btn" onClick={this.onClick.bind(this)}>Enquiry</button >
          </div>

          <ul className="header">
            <li><NavLink  to="/contact">Contact</NavLink ></li>
            <li><NavLink  to="/Home">Home</NavLink ></li>
          </ul>

          <div>
            <Route path="/Home" component={Home}/> …

我试图将注册功能重定向到反应主页，使用usehistory Hook 当我运行我的代码时它显示这样的错误 ::

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

版本：“react”：“^17.0.2”，“react-router-dom”：“^6.2.1”

下面是我给出的登录代码：

import {useState,React} from 'react'
import "./login.css"
import {
   Link,useHistory
} from "react-router-dom";

  
import {auth,db} from "./firebase"
function Login() {
  //taking input value from email and password field …