React Router - нужна помощь в маршрутизации

Question

Моя проблема: если я открою http://example.test/profile/create, компонент «Новый профиль» не загрузится. То же самое с просмотром и редактированием маршрутов.

Фактически, если я нажимаю на Link на profile/create, под компонентом заголовка отображается пустое пространство. Если я попытаюсь перейти на go по указанному выше адресу напрямую через URL-адрес или обновив страницу, появится сообщение об ошибке 404 page not found.

Компоненты входа и регистрации работают абсолютно нормально, как и ProfileList (при нажатии Ссылка или прямая навигация работают нормально).

<BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route exact path='/' component={ProfilesList} />
                        <Route exact path='/login' component={LoginComponent} />
                        <Route exact path='/register' component={RegisterComponent} />
                        <Route exact path='/profile'>
                            <Route exact path='/create' component={NewProfile} />
                            <Route exact path='/view'>
                                <Route path='/:id' component={ProfileDetail} />
                            </Route>
                            <Route exact path='/edit'>
                                <Route path='/:id' component={EditProfile} />
                            </Route>
                        </Route>
                    </Switch>
                </div>
            </BrowserRouter>

PS - Приведенный ниже код работал для http://example.test/create И для http://example.test/1:

<BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route exact path='/' component={ProfilesList} />
                        <Route path='/login' component={LoginComponent} />
                        <Route path='/register' component={RegisterComponent} />
                        <Route path='/create' component={NewProfile} />
                        <Route path='/:id' component={ProfileDetail} />
                    </Switch>
                </div>
            </BrowserRouter>

Я использую Laravel 7 для запуска моего сервера. Файл routes / web. php выглядит так -

<?php

Route::view('/{path?}', 'app');

Answer 1

Надеюсь, это кому-то поможет.

Ключ заключается в добавлении переменной match.path. Сначала мой файл App. js (место входа для моего приложения) -

class App extends Component {
    render () {
        return (
            <BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route exact path='/' component={ProfilesList} />
                        <Route path='/login' component={LoginComponent} />
                        <Route path='/register' component={RegisterComponent} />
                        <Route path='/profile' component={Profiles} />
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

Затем файл Profiles. js, который обрабатывает ссылку на маршрутизацию для профилей.

const Profiles = ({match}) => {

    return (
        <BrowserRouter>
            <Switch>
                <Route path={`${match.path}/create`} component={NewProfile}/>
                <Route path={`${match.path}/view`} render={({match}) => (
                    <Route path={`${match.path}/:id`} component={ProfileDetail}/>
                )} />
                <Route path={`${match.path}/edit`} render={({match}) => (
                    <Route path={`${match.path}/:id`} component={EditProfile}/>
                )} />
            </Switch>
        </BrowserRouter>
    )
}

export default Profiles

Я все еще сталкиваюсь с проблемой, когда браузер выдает ошибку 404 при попытке посетить URL-адрес вручную. Я знаю, что ответ кроется в этом ответе Стейна де Витта - я, скорее всего, хочу найти комплексное решение, которое он предложил, но я не знаю, как это сделать. Может кто поможет?