My react app react-router-dom not work. It shows error

TypeError: path_to_regexp__WEBPACK_IMPORTED_MODULE_8___default.apile is not a function

Check out image

I'm not sure why show that error problem with react-router-dom

Check my code

That code shows error

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 ponent={DefaultLayout} />
                        <Route path="/admin/signup"  ponent={DefaultSignup} />
                        <Route path="/admin/login"  ponent={DefaultLogin} />
                        <Redirect from="/" to="/admin" />
                </Switch> 


            </Router>            
        </>
    )
}

check my code

That code does not show an error but rest app not working because I use Redirect, out of Switch ponent

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

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

                </Switch> 

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

            </Router>            
        </>
    )
}

My react app react-router-dom not work. It shows error

TypeError: path_to_regexp__WEBPACK_IMPORTED_MODULE_8___default.a.pile is not a function

Check out image

I'm not sure why show that error problem with react-router-dom

Check my code

That code shows error

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 ponent={DefaultLayout} />
                        <Route path="/admin/signup"  ponent={DefaultSignup} />
                        <Route path="/admin/login"  ponent={DefaultLogin} />
                        <Redirect from="/" to="/admin" />
                </Switch> 


            </Router>            
        </>
    )
}

check my code

That code does not show an error but rest app not working because I use Redirect, out of Switch ponent

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

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

                </Switch> 

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

            </Router>            
        </>
    )
}

• javascript
• reactjs
• react-router
• react-router-v4
• react-router-dom

• 1 Refer this documentation: reacttraining./react-router/web/api/Redirect – Rojen Commented Jan 5, 2020 at 16:34

2 Answers 2

This error usually occurs because create-react-app installs express module which you can see in package.lock.json and it further installs path-to-regexp with an older version say 0.1.7 but in order to make react-router to work it needs version 1.7.0 or higher. So, you can install path-to-regexp module(npm i path-to-regexp) in the application and restart the application. Everything will work fine.

I deleted the node_modules folder, deleted package-lock.json file, and run an "npm install". That fixed my issue.