Как маршрутизировать разные компоненты в ReactJS - PullRequest
Новая
       0

Как маршрутизировать разные компоненты в ReactJS

0 голосов
/ 23 декабря 2018

Я пытался использовать маршрут ReactJS с помощьюact-router, где у меня есть контейнер, содержащий внутренний компонент.Я продолжаю получать "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

Registration.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

Я должен загрузить страницу входа в качестве целевой страницы и перейти к / зарегистрироваться в качестве страницы регистрации, где у них обоих есть один и тот же контейнер.Вот полное сообщение об ошибке, которое я получаю 

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)

1 Ответ

0 голосов
/ 23 декабря 2018

Есть несколько вещей, которые вам нужно исправить как часть вашего кода.

  1. Ваш контейнер забирает дочерние элементы, но вы не визуализировали его внутри.
  2. Сваш текущий шаблон, если вы отображаете дочерние элементы, если if станет бесконечной рекурсией, так как контейнер отображает дочерние элементы, а дочерние элементы отображают контейнер
  3. BrowserRouter должен присутствовать как оболочка на верхнем уровне, а не как оболочка только Link component
  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;

Registration.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

Рабочая демоверсия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...