如何在ReactJS中路由到不同的组件

Question

我一直在尝试使用带有react-router的ReactJS路由，其中​​我有一个容纳inner组件的容器。 即使正确处理了导入，我仍会收到“ ReferenceError：路径未定义”。

Route.js

const Main = props => (
    <Switch>
        <Route path='/' component={Login} />
        <Route path='/sign-up' component={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>Welcome 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

我希望将登录页面加载为登录页面，并导航至/ sign-up作为登录页面，其中两者都具有相同的容器。 这是我收到的完整错误消息

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)

Answer 1

作为代码的一部分，您需要纠正很多事情。

1. 您的容器带走了孩子，但您没有在其中渲染任何孩子。
2. 在当前模式下，如果您渲染子代，则将成为并且无限递归，因为容器渲染了子代，而子代渲染了容器
3. BrowserRouter必须在顶层作为包装器出现，而不仅仅是Link组件的包装器出现
4. 您在Main组件中的路线需要重新排序，否则它们将始终使用路径/

容器

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 component={Main} />
                    </div>
                </div>
            </div>
          </BrowserRouter>
        );
      }
}

export default Container;

---

Router.js

const Main = props => (
    <Switch>
        <Route path='/sign-up' component={Signup} />
        <Route path='/' component={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>Welcome 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

工作演示