反应路由器dom：重定向和路由器：所有网址都被重定向，如何停止答案

【问题标题】：react router dom: redirect and router: all urls are getting redirected, how to stop反应路由器dom：重定向和路由器：所有网址都被重定向，如何停止
【发布时间】：2020-12-01 18:31:45
【问题描述】：

我有以下 reactjs 代码。

我正在使用 react-router-dom V5

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

import Login from "./views/User/Login";
import Signup from "./views/User/SignUp";
import ForgotPassword from "./views/User/ForgotPassword";
import ResetPassword from "./views/User/ResetPassword";

const hist = createBrowserHistory();

ReactDOM.render(
  
    <Router history={hist}>
        <Route path="/signup" component={Signup} />
        <Route path="/login" component={Login} />
        <Route path="/forgot-password" component={ForgotPassword} />
        <Route path="/rest-auth/password/reset/confirm/:uidb64([0-9A-Za-z_\-]+)/:token([0-9A-Za-z]{1,20}-[0-9A-Za-z]{1,50})" component={ResetPassword}/
        <Redirect from="/" to="/login" />
    </Router>,
  document.getElementById("root")
);

我在浏览器中打开的任何 url 都会被重定向到 /login

例如：我打开/signup 它被重定向到/login

链接有效，但是当我在浏览器中打开任何 url 时，它会被重定向到 /login

【问题讨论】：

标签： react-router-dom

【解决方案1】：

我发现原因是没有使用开关。如果我使用开关，它会起作用

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

import Login from "./views/User/Login";
import Signup from "./views/User/SignUp";
import ForgotPassword from "./views/User/ForgotPassword";
import ResetPassword from "./views/User/ResetPassword";

const hist = createBrowserHistory();

ReactDOM.render(
  
    <Router history={hist}>
        <Switch>
        <Route path="/signup" component={Signup} />
        <Route path="/login" component={Login} />
        <Route path="/forgot-password" component={ForgotPassword} />
        <Route path="/rest-auth/password/reset/confirm/:uidb64([0-9A-Za-z_\-]+)/:token([0-9A-Za-z]{1,20}-[0-9A-Za-z]{1,50})" component={ResetPassword}/
        <Redirect from="/" to="/login" />
        </Switch>
    </Router>,
  document.getElementById("root")
);

另外Route 和Redirect 应该在Switch 的正下方，否则Switch 将不起作用。

例子

    <Router history={hist}>
        <Switch>
            <>
                <Route path="/signup" component={Signup} />
                <Route path="/login" component={Login} />
                <Route path="/forgot-password" component={ForgotPassword} />
                <Route path="/rest-auth/password/reset/confirm/:uidb64([0-9A-Za-z_\-]+)/:token([0-9A-Za-z]{1,20}-[0-9A-Za-z]{1,50})" component={ResetPassword}/
                <Redirect from="/" to="/login" />
            </>
        </Switch>
    </Router>,

Switch在这里没有任何影响，所以如果我们尝试在浏览器中输入/signup它也会匹配/所以它会转到/login

【讨论】：