I have been trying to use ReactJS route using react-router where I have a container that holds innner ponent. I keep getting "ReferenceError: path is not defined" even when I have handled my imports properly.

Route.js

const Main = props => (
    <Switch>
        <Route path='/' ponent={Login} />
        <Route path='/sign-up' ponent={Signup} />
    </Switch>
);

export default Main;

Container.js

class Container extends React.Component{
render() {
    return (
        <div className="onboarding">
            <div className="container middle">
                <div className="inner">
                    <div className="row">
                        <div className="col-4">
                            <img src="/assets/img/logo.svg"/>
                        </div>
                    </div>
                    <Main />
                </div>
            </div>
        </div>
    );
  }
}

export default Container;

Login.js

class Login extends React.Component{
render(){
    return (
        <Container>
        <div>
            <div className="row">
                <div className="col-12">
                    <h3>Wele Back!<span></span></h3>
                </div>
            </div>
            <div className="row">
                <div className="col-12">
                    <form className="onboard-form">
                        <div className="input-ctn">
                            <label>Email Address</label>
                            <input type="email"/>
                        </div>

                        <div className="input-ctn">
                            <label>Password</label>
                            <input type="password" className=""/>
                        </div>

                        <input type="submit" value="Log In" 
    className="btn-block"/>

                    </form>

                    <p className="text-center">Don't have an 
    account? <BrowserRouter><Link to="/sign-up">Sign Up</Link> . 
    </BrowserRouter></p>
                </div>
            </div>
        </div>

        </Container>
       );
    }
}

export default Login

Signup.js

class Signup extends React.Component{
render(){
    return (
        <Container>
            <div className="row">
                <div className="col-12">
                    <h3>Hello there!<span></span></h3>
                    <p>Signup</p>
                </div>
            </div>
            <div className="row">
                <div className="col-12">
                    <form className="onboard-form">
                        <div className="input-ctn">
                            <label>Please enter your phone 
number</label>
                            <input type="tel" 
placeholder="08123456789"/>
                        </div>

                        <input type="submit" value="Get Started" 
className="btn-block"/>
                    </form>
                    <p className="text-center">Already have an 
account? <a href="#">Log In</a></p>
                </div>
            </div>

        </Container>
    );
    }
}

export default Signup

I am expected to load the login page as the landing page and navigate to /sign-up as the signup page where both of them have the same container. Here is the full error message I get

ReferenceError: path is not defined
at /Users/myUser/Documents/Website Projects/React Projects/myProject/lib/server.js:13:18
at Layer.handle [as handle_request] (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/layer.js:95:5)
at /Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:281:22
at param (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:354:14)
at param (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:410:3)
at next (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:275:10)

I have been trying to use ReactJS route using react-router where I have a container that holds innner ponent. I keep getting "ReferenceError: path is not defined" even when I have handled my imports properly.

Route.js

const Main = props => (
    <Switch>
        <Route path='/' ponent={Login} />
        <Route path='/sign-up' ponent={Signup} />
    </Switch>
);

export default Main;

Container.js

class Container extends React.Component{
render() {
    return (
        <div className="onboarding">
            <div className="container middle">
                <div className="inner">
                    <div className="row">
                        <div className="col-4">
                            <img src="/assets/img/logo.svg"/>
                        </div>
                    </div>
                    <Main />
                </div>
            </div>
        </div>
    );
  }
}

export default Container;

Login.js

class Login extends React.Component{
render(){
    return (
        <Container>
        <div>
            <div className="row">
                <div className="col-12">
                    <h3>Wele Back!<span></span></h3>
                </div>
            </div>
            <div className="row">
                <div className="col-12">
                    <form className="onboard-form">
                        <div className="input-ctn">
                            <label>Email Address</label>
                            <input type="email"/>
                        </div>

                        <div className="input-ctn">
                            <label>Password</label>
                            <input type="password" className=""/>
                        </div>

                        <input type="submit" value="Log In" 
    className="btn-block"/>

                    </form>

                    <p className="text-center">Don't have an 
    account? <BrowserRouter><Link to="/sign-up">Sign Up</Link> . 
    </BrowserRouter></p>
                </div>
            </div>
        </div>

        </Container>
       );
    }
}

export default Login

Signup.js

class Signup extends React.Component{
render(){
    return (
        <Container>
            <div className="row">
                <div className="col-12">
                    <h3>Hello there!<span></span></h3>
                    <p>Signup</p>
                </div>
            </div>
            <div className="row">
                <div className="col-12">
                    <form className="onboard-form">
                        <div className="input-ctn">
                            <label>Please enter your phone 
number</label>
                            <input type="tel" 
placeholder="08123456789"/>
                        </div>

                        <input type="submit" value="Get Started" 
className="btn-block"/>
                    </form>
                    <p className="text-center">Already have an 
account? <a href="#">Log In</a></p>
                </div>
            </div>

        </Container>
    );
    }
}

export default Signup

I am expected to load the login page as the landing page and navigate to /sign-up as the signup page where both of them have the same container. Here is the full error message I get

ReferenceError: path is not defined
at /Users/myUser/Documents/Website Projects/React Projects/myProject/lib/server.js:13:18
at Layer.handle [as handle_request] (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/layer.js:95:5)
at /Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:281:22
at param (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:354:14)
at param (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:410:3)
at next (/Users/myUser/Documents/Website Projects/React Projects/myProject/node_modules/express/lib/router/index.js:275:10)

• javascript
• reactjs
• react-router

• Can you show the full error message? – ic3b3rg Commented Dec 23, 2018 at 6:19
• You need to import and use the browserRouter Seethe basic example here: reacttraining./react-router/web/example/basic – SakoBu Commented Dec 23, 2018 at 6:24
• @ic3b3rg I have added the error message now – Temi 'Topsy' Bello Commented Dec 23, 2018 at 6:24

1 Answer 1

There are multiple things that you need to correct as part of your code.

1. You container takes the children, but you haven't rendered any within it.
2. With your current pattern if you render children, if will bee and infinite recursion, since container renders children, and children render container
3. BrowserRouter must be present as a wrapper at top level and not as a wrapper of just the Link ponent
4. Your Routes within Main ponent needs re-ordering, else they will always render the route with path /

Container

class Container extends React.Component{

    render() {
        return (
          <BrowserRouter>
            <div className="onboarding">
                <div className="container middle">
                    <div className="inner">
                        <div className="row">
                            <div className="col-4">
                                <img src="/assets/img/logo.svg"/>
                            </div>
                        </div>
                        <Route ponent={Main} />
                    </div>
                </div>
            </div>
          </BrowserRouter>
        );
      }
}

export default Container;

Router.js

const Main = props => (
    <Switch>
        <Route path='/sign-up' ponent={Signup} />
        <Route path='/' ponent={Login} />
    </Switch>
);

export default Main;

Signup.js

class Signup extends React.Component{

    render(){
        return (
            <React.Fragment>
                <div className="row">
                    <div className="col-12">
                        <h3>Hello there!<span></span></h3>
                        <p>Signup</p>
                    </div>
                </div>
                <div className="row">
                    <div className="col-12">
                        <form className="onboard-form">
                            <div className="input-ctn">
                                <label>Please enter your phone 
    number</label>
                                <input type="tel" 
    placeholder="08123456789"/>
                            </div>

                            <input type="submit" value="Get Started" 
    className="btn-block"/>
                        </form>
                        <p className="text-center">Already have an 
    account? <a href="#">Log In</a></p>
                    </div>
                </div>
               </React.Fragment>
            );
        }
}

export default Signup

Login.js

class Login extends React.Component{
render(){
    return (
        <div>
            <div className="row">
                <div className="col-12">
                    <h3>Wele Back!<span></span></h3>
                </div>
            </div>
            <div className="row">
                <div className="col-12">
                    <form className="onboard-form">
                        <div className="input-ctn">
                            <label>Email Address</label>
                            <input type="email"/>
                        </div>

                        <div className="input-ctn">
                            <label>Password</label>
                            <input type="password" className=""/>
                        </div>

                        <input type="submit" value="Log In" 
    className="btn-block"/>

                    </form>

                    <p className="text-center">Don't have an 
    account? <Link to="/sign-up">Sign Up</Link>.</p>
                </div>
            </div>
        </div>
       );
    }
}

export default Login

Working demo