重定向未更改 React 应用程序中的 url

Question

我的渲染页面

import "./splash.css";
import { Redirect } from 'react-router-dom';
import React from 'react';

function Splash() {
    const login = () => {
        console.log('123')
        return <Redirect to='/login' />;
    }
    const signup = () => {
        return <Redirect to='/sign-up' />;
    }
    return (
        <>
            <div className="bannerContainer">
                <h1>Costco Connect</h1>
            </div>
            <div className="formContainer">
                <div
                    className="loginContainer"
                    onClick={login}
                >
                    <h2>Login</h2>
                </div>
                <div
                    className="loginContainer"
                    onClick={signup}
                >
                    <h2>Sign Up</h2>
                </div>
            </div>
        </>
    );
}



export default Splash;

还有我的app.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import SignUpForm from './components/auth/SignUpForm';
import NavBar from './components/NavBar';
import ProtectedRoute from './components/auth/ProtectedRoute';
import UsersList from './components/UsersList';
import User from './components/User';
import { authenticate } from './store/session';
import Tickets from './components/Tickets';
import Departments from './components/Departments';
import Splash from './components/Splash';
import LoginForm from './components/auth/LoginForm';

function App() {
  const [loaded, setLoaded] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    (async () => {
      await dispatch(authenticate());
      setLoaded(true);
    })();
  }, [dispatch]);

  if (!loaded) {
    return null;
  }

  return (
    <BrowserRouter>
      <ProtectedRoute >
        <NavBar />
      </ProtectedRoute>
      <Switch>
        <Route path='/login' exact={true}>
          <LoginForm />
        </Route>
        <Route path='/sign-up' exact={true}>
          <SignUpForm />
        </Route>
        <ProtectedRoute path='/users' exact={true} >
          <UsersList />
        </ProtectedRoute>
        <ProtectedRoute path='/users/:userId' exact={true} >
          <User />
        </ProtectedRoute>
        <Route path='/' exact={true} >
          <Splash />
        </Route>
        <ProtectedRoute path='/departments' exact={true} >
          <Departments />
        </ProtectedRoute>
        <ProtectedRoute path='/departments/:departmentId/tickets' exact={true} >
          <Tickets />
        </ProtectedRoute>
        {/*
        <ProtectedRoute path='/departments/:departmentId/tickets/:ticketId' exact={true} >
          <Tickets />
        </ProtectedRoute> */}
      </Switch>
    </BrowserRouter>
  );
}

export default App;

基本上，当您单击 div 时，我会尝试将其发送到相关表格以进行注册或登录，但我无法弄清楚为什么 url没有被重定向。如果我在函数内部抛出一个 console.log 它们是运行ning 所以我确信这个错误在我的 app.js 某处但是我运行没有东西可以尝试。提前致谢，我查看了其他类似的帖子，但到目前为止没有任何解决方案有帮助。

Answer 1

解决方案是改用 NavLink，重定向只有在条件内然后返回时才有效。

重定向未更改 React 应用程序中的 url

Redirect is not changing the url in react app

javascript

redirect

routes

reactjs

react-redux