Реагировать роутер дом + материал пользовательского интерфейса - PullRequest
Новая
       41

Реагировать роутер дом + материал пользовательского интерфейса

0 голосов
/ 19 сентября 2019

Мне интересно, действительно ли я понял это правильно ...

Итак, даже несмотря на то, что Material UI, похоже, является одним из наиболее часто используемых компонентов готовых компонентов, он просто не будет работать с Reaction-Dom-router.?

У меня есть огромный проект, в котором используются оба ... ну, до 5 минут назад я предполагал, что эти вещи вообще не совместимы ...

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

теперь я действительно понятия не имею, что делать ...

Есть ли простой способ сделать навигацию с помощью Reaction и Material-UI без изучения дополнительных библиотек?

Что мне нужно, так это просто навигация вверху страницы, которая бы собирала все страницы под ним, с отчетливымURL для аналитических целей.

Я действительно не понимаю, как что-то, что я могу сделать в обычном HTML за 5 минут, так как 90-е годы могут быть такими глупыми в реакции + материал-интерфейс ... 

"react-router": "4.3.1",
"@material-ui/core": "3.9.2",



function AppRouter() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <Link to="/" component={Recalculate}>
                            <Button
                                variant="contained"
                                color="primary">
                                Recalculate ...
                            </Button>
                        </Link>
                        <Link to="/edata" component={ExportData}>
                            <Button
                                variant="contained"
                                color="primary">
                                Export data ...
                            </Button>
                        </Link>
                        <Link to="/ddata" component={DeleteData}>
                            <Button
                                variant="contained"
                                color="primary">
                                Delete data ...
                            </Button>
                        </Link>
                    </ul>
                </nav>
            </div>
        </Router>
    );
}

function Recalculate() {
    return (
        <div>
            <Grid container
                  direction="column"
                  alignItems="center"
                  item
                  xs={12}
                  justify="center">
                <Card className="MidCard">
                    <CardContent>
                        <Grid>
                            <Header />
                            <Front />
                        </Grid>
                    </CardContent>
                </Card>
            </Grid>
        </div>
    );
}

function ExportData() {
    return (
        <div>
            <Grid container
                  direction="column"
                  alignItems="center"
                  item
                  xs={12}
                  justify="center">
                what thge
            </Grid>
        </div>
    );
}

function DeleteData() {
    return (
        <div>
            <Grid container
                  direction="column"
                  alignItems="center"
                  item
                  xs={12}
                  justify="center">
                asdasdasdasd
            </Grid>
        </div>
    );
}

Еслиу кого-нибудь есть разумное решение, я был бы ооочень счастлив.

...