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

Question

我一直在尝试使用 react-router 来使用 ReactJS 路由，其中​​我有一个包含内部组件的容器。即使我正确处理了我的导入，我也会不断收到“ReferenceError：路径未定义”。

Route.js

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

export default Main;

容器.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;

登录.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

---

登录.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

Working demo