江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

javascript - How to Route to different components in ReactJS - Stack Overflow

admin••questions•阅读3

I have been trying to use ReactJS route using react-router where I have a container that holds innner p

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
Share Improve this question edited Dec 23, 2018 at 6:24 Temi 'Topsy' Bello asked Dec 23, 2018 at 6:15 Temi 'Topsy' BelloTemi 'Topsy' Bello 1762 silver badges11 bronze badges 3
  • 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
Add a ment  | 

1 Answer 1

Reset to default 4

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745410533a4626509.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信