Можно ли сделать контроллер на манер фреймворков?

@Gvizl · Регистрация: 31.01.2014

Author24 — интернет-сервис помощи студентам

Можно ли сделать контроллер на манер фреймворков(laravel,yii2)?
Просто пока кажется, что придётся все урл на компоненты завязывать.

Javascript

const AppRouter = () => (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home1188</Link>
            </li>
            <li>
 
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>
 
 
 [B]       <Route path="/users/" component={UsersPage} />
        <Route path="/users/create" component={Users} /> //как сделать этот адрес get
        <Route path="/users/create" component={Users} /> //а этот post? что бы к нему обращаться из формы с UsersPage[/B]
        //и можно ли как-то собрать все эти адреса в один контроллер? потому что в приложении будет много пдобных crud
      </div>
    </Router>
);

@Evgen1337 · 16.01.2019, 14:08

тут подход другой, и так сделать не получится

Сообщение от Gvizl

//как сделать этот адрес get

в самом компоненте роута, в componentDidMount сделать ajax запрос...

Сообщение от Gvizl

//а этот post? что бы к нему обращаться из формы с UsersPage

делать post через ajax

Сообщение от Gvizl

//и можно ли как-то собрать все эти адреса в один контроллер?

ага, написать общий компонент, в который в кач-ве props получает необходимые данные

@Gvizl · 16.01.2019, 19:31 **[ТС]**

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

Javascript

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import HelloMessage from './components/HelloMessage';
 
const Users = () => <h2>Users</h2>;
 
const AppRouter = () => (
    <Router>
      <div>
        <nav>
          <ul>
              <li>
                  <Link to="/">Index</Link>
              </li>
            <li>
              <Link to="/posts">HelloMessage</Link>
            </li>
 
            <li>
              <Link to="/users/">Users</Link>
            </li>
 
          </ul>
        </nav>
 
 
        <Route exact path="/posts" component={HelloMessage} />
        <Route path="/users/" component={Users} />
 
      </div>
    </Router>
);
 
export default AppRouter;

Javascript

import React, { Component } from 'react';
import { BrowserRouter as Route, Link, Switch } from "react-router-dom";
import HelloMessage2 from './HelloMessage2';
 
const About = () => <h2>About</h2>;
 
 
 
export default class HelloMessage extends Component {
    render() {
        return (
            <div>
              <p>Welcome to Create Component!!</p>
 
                <Link to="/posts/about/">HelloMessage2</Link>
 
 
                <Route path="/posts/about/" component={HelloMessage2} />
 
 
            </div>
        )
    }
}

Javascript

import React, { Component } from 'react';
 
 
export default class HelloMessage2 extends Component {
    render() {
        return (
            <div>
              <p>Welcome to Create Component3!!</p>
 
            </div>
        )
    }
}

Добавлено через 2 часа 19 минут
Неужели нет способа как-то импортировать роуты из подгружаемых компонентов? В AppRouter не очень удобно всё это прописывать - кучу crмаршрутов по каждой модели.

Добавлено через 1 час 33 минуты
Evgen1337, я имел в виду, что хочу что бы app.js можно было маршруты разбить на группы. То есть создал я компонент user и что бы в app.js его импортировал, а маршруты по его crud были прописаны в нём, а не app.js
п.с и, как я понимаю, в реакт роуте все параметры в урл обязательные, то есть нельзя сделать типа
<Route path="/posts/:id?" component={PostPage} />

@Evgen1337 · 17.01.2019, 12:12

в разделе Nested Routes
https://reacttraining.com/reac... philosophy

@Gvizl · 17.01.2019, 12:17 **[ТС]**

Evgen1337, там роуты в app.js, когда роуты в нём, всё работает, но роуты внутри дочерних компонентов не видны приложением как в моём примере выше.

@Evgen1337 · 17.01.2019, 12:48

https://reacttraining.com/reac... withRouter

Добавлено через 31 секунду
документацию то прочитал про роутер? там все ... написано %)

@Gvizl · 17.01.2019, 14:29 **[ТС]**

Evgen1337, это передача роута детям. Моя проблема в том, что в app.js

Javascript

1	<Route exact path="/posts" component={HelloMessage} />

У дочернего компонента HelloMessage при вызове...

Javascript

export default class HelloMessage extends Component {
    render() {
        return (
            <div>
              <p>Welcome to Create Component!!</p>
                <Link to="/posts/about/">HelloMessage2</Link>
                <Route path="/posts/about/" component={HelloMessage2} />
            </div>
        )
    }
}

...ещё одного дочернего компонента HelloMessage2 через Route не работает/не рендереит при переходе на дочернюю ссылку.

Route работает только в app.js

@Evgen1337 · 17.01.2019, 15:56

$ cd ~/
$ create-react-app testrouter
$ cd testrouter
$ yarn add react-router react-router-dom
$ yarn start

заменить содержимое App.js на:

Javascript

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
const Index = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Profile = () => <h2>Profile</h2>;
const Users = () => <div>
  <h2>
    Users
  </h2>
  <Link to="/users/profile">Profile</Link>
  <Route path="/users/profile" component={Profile} />
</div>;
 
const AppRouter = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
        </ul>
      </nav>
 
      <Route path="/" exact component={Index} />
      <Route path="/about/" component={About} />
      <Route path="/users/" component={Users} />
    </div>
  </Router>
);
 
export default AppRouter;

работает...

@Gvizl · 17.01.2019, 16:02 **[ТС]**

Я написал

...ещё одного дочернего компонента HelloMessage2 через Route не работает/не рендереит при переходе на дочернюю ссылку.

Route работает только в app.js

Evgen1337, и твой пример в app.js То есть route работает ток в первородном компоненте, но не в дочерних. Ну, у меня не получилось, поэтому пока пишу в app.js все роуты

@Evgen1337 · 17.01.2019, 16:41

у меня работает...

App.js

Javascript

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Users from './Users'
const Index = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
 
const AppRouter = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
          <li>
            <Link to="/users/">Users</Link>
          </li>
        </ul>
      </nav>
 
      <Route path="/" exact component={Index} />
      <Route path="/about/" component={About} />
      <Route path="/users/" component={Users} />
    </div>
  </Router>
);
 
export default AppRouter;

Users.js

Javascript

import React from "react";
import { Route, Link } from "react-router-dom";
import Profile from './Profile'
 
const Users = () => <div>
  <h2>
    Users
  </h2>
  <Link to="/users/profile">Profile</Link>
  <Route path="/users/profile" component={Profile} />
</div>;
 
export default Users

Profile.js

Javascript

import React from "react";
 
const Profile = () => <h2>Profile</h2>;
 
export default Profile

@Gvizl · 17.01.2019, 17:01 **[ТС]**

Evgen1337, не работает. Похоже, у меня где-то косяк в настройках.

@Evgen1337 · 17.01.2019, 17:07

Не по теме:

Ну а в консоле то что пишет?

@Gvizl · 17.01.2019, 17:17 **[ТС]**

Evgen1337, спасибо за помощь! Твой вариант рабочий, косяк был у меня
п.с в дочерней компоненте не так импортировал BrowserRouter as Route , а надо было Route (не заметил разницу сначала)

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	16.01.2019, 14:08	2
	тут подход другой, и так сделать не получится Сообщение от Gvizl //как сделать этот адрес get в самом компоненте роута, в componentDidMount сделать ajax запрос... Сообщение от Gvizl //а этот post? что бы к нему обращаться из формы с UsersPage делать post через ajax Сообщение от Gvizl //и можно ли как-то собрать все эти адреса в один контроллер? ага, написать общий компонент, в который в кач-ве props получает необходимые данные 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	17.01.2019, 12:12	4
	в разделе Nested Routes https://reacttraining.com/reac... philosophy 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 464
	17.01.2019, 12:17 [ТС]	5
	Evgen1337, там роуты в app.js, когда роуты в нём, всё работает, но роуты внутри дочерних компонентов не видны приложением как в моём примере выше. 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	17.01.2019, 12:48	6
	https://reacttraining.com/reac... withRouter Добавлено через 31 секунду документацию то прочитал про роутер? там все ... написано %) 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 464
	17.01.2019, 16:02 [ТС]	9
	Я написал ...ещё одного дочернего компонента HelloMessage2 через Route не работает/не рендереит при переходе на дочернюю ссылку. Route работает только в app.js Evgen1337, и твой пример в app.js То есть route работает ток в первородном компоненте, но не в дочерних. Ну, у меня не получилось, поэтому пока пишу в app.js все роуты 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 464
	17.01.2019, 17:01 [ТС]	11
	Evgen1337, не работает. Похоже, у меня где-то косяк в настройках. 0

@Evgen1337
	17.01.2019, 17:07 #12
	Не по теме: Ну а в консоле то что пишет? 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 464
	17.01.2019, 17:17 [ТС]	13
	Evgen1337, спасибо за помощь! Твой вариант рабочий, косяк был у меня п.с в дочерней компоненте не так импортировал BrowserRouter as Route , а надо было Route (не заметил разницу сначала) 0

Можно ли сделать контроллер на манер фреймворков?

Решение