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

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
1
2
3
4
5
6
7
8
9
10
11
12
13
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
1
2
3
4
5
6
7
8
9
10
11
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
1
2
3
4
5
6
7
8
9
10
11
12
13
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
1
2
3
4
5
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 (не заметил разницу сначала)

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

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

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

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

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

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

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

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

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

Решение