相关疑难解决方法(0)

我试图理解在 React Router 中使用 Router 和 Switch 之间的区别。

但我不明白为什么在下面的示例中使用Switch有效：

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

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/item" component={SocialMediaShare} />
        </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

但是使用Router会抛出错误：

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

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <Router>
            <Route exact path="/" component={App} />
            <Route path="/item" component={SocialMediaShare} />
        </Router>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')

我正在使用react router 4.0版本.我想在按钮点击时从一个组件导航到另一个组件.我为此实现了反应路由.实现当我点击导航按钮后它给我的错误"遗漏的类型错误:this.context.router.push不是一个函数",并警告"失败上下文类型:无效的上下文router类型的object供给EmpLogin,预计function." 尝试了很多,但无法使它工作.下面是我的组件和路由实现.早些时候我正在使用react router 2.0和browserhistory.push工作.

export class EmpLogin extends React.Component {
  constructor(props) {
super(props);
this.state = {

};
}

loginID(e) {
this.setState({loginID: e.target.value});
}

 Password(e) {
this.setState({password: e.target.value});
}

 navigate(e){
    e.preventDefault();
    this.context.router.push('/EmpDetails');
  }

render() {
  return (
    <div>
    <div >
      <form>
        <input type="text" onChange={this.loginID.bind(this)} />
        <input type="password" onChange={this.Password.bind(this)} />  
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      </form>
    </div>
  </div>
);
 }
 }

  EmpLogin.contextTypes = {
  router: React.PropTypes.func.isRequired
 }

 export default EmpLogin;

路由实施 - …

我有一个 React 组件，它整体上是可点击的，但内部也包含按钮。

所以像

<Link to={'/path1'}>
  ...
  <Link to={'path2'} />
  ...
</Link> 

这是我想要的行为，但我收到此警告：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See SearchResult > Link > a > ... > Link > a.

我应该如何认真对待这个问题，解决方法是什么？

当 /logout 路由被命中时，我试图将用户重定向到登录页面。身份验证正在工作（删除了 jwt 令牌，但应用程序无法重定向到 /login。

另外，如果我这样做/应用程序也会崩溃。

在登录路由上，我使用了 react-router-dom 包中的 withRouter，我可以访问this.props.history.push('/redirect_to_a_new_path')，但是当我尝试使用withRouter方法包装 App 组件时，它也会崩溃。

请帮忙！

这是github 仓库：

应用程序.js

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  withRouter
} from "react-router-dom";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import lightBaseTheme from "material-ui/styles/baseThemes/lightBaseTheme";
import getMuiTheme from "material-ui/styles/getMuiTheme";
import injectTapEventPlugin from "react-tap-event-plugin";

// Components
import Navbar from "./components/Navbar";
import HomePage from "./components/HomePage";
import SpotMap from "./components/SpotMap";
import SignUpPage from "./components/containers/SignUpPage";
import LoginPage from "./components/containers/LoginPage";
import …

我使用 axios 拦截器来维护内部服务器错误。如果响应有错误而不重新加载，我需要重定向到另一个 url。下面的代码我使用了 location.href。所以它正在重新加载。我需要一个解决方案来重定向而不刷新页面。

我在 react-router-dom 中尝试了“重定向”。但它对我不起作用。

export function getAxiosInstance() {
    const instance = axios.create();
    const token    = getJwtToken();

    // Set the request authentication header
    instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;

    // Set intercepters for response
    instance.interceptors.response.use(
        (response) => response,
        (error) => {
            if (config.statusCode.errorCodes.includes(error.response.status)) {
                return window.location.href = '/internal-server-error';
            }

            return window.location.href = '/login';
        }
    );

    return instance;
}

谁能帮我解决这个问题？

我已经创建了一些动画，我想用它们在我的应用程序中的路由之间导航。我在某些页面上有一个后退按钮，允许用户弹出导航堆栈以访问最近的页面。我想要两种不同的动画，一种用于在堆栈中更深入地导航，另一种用于弹出回到最近的页面。我想使用history.goBack()，但似乎无法传递状态并因此使用不同的动画。

我使用这篇文章来弄清楚如何为我的组件设置动态动画，但除非我使用，否则我history.push({pathname, state:{animation, duration}})不知道如何在用户返回时指定要使用的不同动画。

尝试使用反应，我决定测试打字稿。

代码：

import { BrowserRouter } from 'react-router-dom'
import history  from './utilities/history'

ReactDOM.render(
  <BrowserRouter history={history}>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

历史.js：

import { createBrowserHistory } from 'history'

export default createBrowserHistory()

错误：

类型 '{ 子元素：元素；历史：历史；}' 不可分配给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{children?: ReactNode; }>'。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{children?: ReactNode;”上不存在属性“history” }>'.ts(2322)

包.json：

@types/react-router-dom": "^4.3.4",
react-router-dom": "^5.0.1",

当没有打字稿做完全相同的事情时，代码就可以工作。我不明白为什么会发生这种情况，有人有答案吗？

我在按钮上有一个 onClick 事件，该事件将请求推送到服务器，并且应该在提交后返回主页，我尝试在该组件上使用 Reactjs useHistory 挂钩，但是我不断收到错误TypeError: Object(...) is not a function。

我需要帮助来解决这个问题

我有这个：

  <Link to="/">
    <Menu.Item name='expense List' active={activeItem === 'expense List'} onClick={this.handleItemClick} />
  </Link>

但我在控制台中收到错误消息：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by MenuItem)
    in MenuItem (at Header.js:26)
    in a (created by Link)
    in Link (at Header.js:25)
    in div (created by Menu)
    in Menu (at Header.js:22)
    in div (at Header.js:20)
    in Header (at AddExpense.js:8)
    in div (at AddExpense.js:7)
    in AddExpense (created by Route)
    in Route (at index.js:20)
    in Switch (at index.js:18)
    in Router (created by …

我正在使用 react-router-dom v5.2。

登录后，我希望我的页面重定向到/homefrom /。登录表单位于/。

当我尝试在没有任何异步功能的情况下执行身份验证（即，将用户名和密码与 react 中的硬编码值进行比较）时，一切正常。

但是当我使用 express 和 mongo 执行身份验证时，登录时的重定向停止工作。如果我再次登录，则会发生重定向。受保护的路由仍然有效（如果用户未登录，则重定向到登录页面）。

这是我在 express + mongo ie 中使用 do auth 的问题的一个小演示。异步还原。这没有按预期工作。https://youtu.be/Zxm5GOYymZQ

这是我使用硬编码用户名和密码（均为“测试”）进行身份验证的应用程序链接。这里没有异步。这按预期工作。用户名和密码都是“test”。https://poke-zoo.herokuapp.com/

这是App.js：

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const authState = useSelector(selectorAuth)
  // const location = useLocation()
  return (
    <Route
      {...rest}
      render={props => {
        if (authState.isUserLoggedIn) {
          return <Component {...props} />
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location,
                }, …

我想在操作被触发后重定向客户端。我听说过react-redux-router，但不确定如何在操作函数中正确实现它。

我关注了一点这个

/sf/answers/3009011281/

但是，当我提交经过验证的表单时，它不会重定向或刷新。

Actions.js

 import { auth as firebaseAuth } from '../firebaseConfig'
 import { push,  browserHistory } from 'react-router-redux';


 export const signUp = (user) => { return (dispatch) => {
  firebaseAuth.createUserWithEmailAndPassword(user.email, user.password)
    .then(() => {
        dispatch({ type: 'SIGNUP_SUCCESS',
        payload: (action, state, res) => {
            return res.json().then(json => {
              browserHistory.push('/');
              return json;
            });
          },
    });
    }).catch((err) => {
        dispatch({ type: 'SIGNUP_ERROR', err});
    });
  }  
}

减速器.js

const initialState = {
  emailSignUp: '',
  passwordSignUp: '',
  authError: null

}

export …