首页 > 解决方案 > React-router-dom 重定向不起作用 - 显示错误

问题描述

我的反应应用程序 react-router-dom 不起作用。它显示错误

类型错误:path_to_regexp__WEBPACK_IMPORTED_MODULE_8___default.a.compile 不是函数

查看图片

未捕获的类型错误:path_to_regexp__WEBPACK_IMPORTED_MODULE_8___default.a.compile is not a function show error in react app


我不确定为什么用 react-router-dom 显示错误问题

检查我的代码

该代码显示错误


import React from 'react'
import DefaultLayout from './Component/Layout/DefaultLayout';
import DefaultLogin from './Component/Login/DefaultLogin';
import DefaultSignup from './Component/Sign-up/DefaultSignup';



// react-router-dom

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";


// bootstrap css
import 'bootstrap/dist/css/bootstrap.min.css';

// css for global 
import './App.scss';


export default function App() {
    return (
        <>
            <Router>   

                <Switch> 
                        <Route path="/admin" exact component={DefaultLayout} />
                        <Route path="/admin/signup"  component={DefaultSignup} />
                        <Route path="/admin/login"  component={DefaultLogin} />
                        <Redirect from="/" to="/admin" />
                </Switch> 


            </Router>            
        </>
    )
}

检查我的代码

该代码未显示错误,但其余应用程序无法正常工作,因为我使用Redirect,不在Switch组件中


export default function App() {
    return (
        <>
            <Router>   

                <Switch> 
                        <Route path="/admin" exact component={DefaultLayout} />
                        <Route path="/admin/signup"  component={DefaultSignup} />
                        <Route path="/admin/login"  component={DefaultLogin} />

                </Switch> 

                {/* this show not error but rest app not work proper */}
                   <Redirect from="/" to="/admin" />

            </Router>            
        </>
    )
}

标签: javascriptreactjsreact-routerreact-router-v4react-router-dom

解决方案


发生此错误通常是因为 create-react-app 安装了您可以在 package.lock.json 中看到的 express 模块,并且它进一步安装了旧版本 0.1.7 的 path-to-regexp ,但为了使 react-router 工作它需要 1.7.0 或更高版本。因此,您可以在应用程序中安装 path-to-regexp 模块(npm i path-to-regexp)并重新启动应用程序。一切都会好起来的。


推荐阅读