React Router - need help routing

user_806256 0
Viewed 97

My problem: If I open http://example.test/profile/create, the New Profile component does not get loaded. Same with the view and edit routes.

In fact, if I click on a Link to profile/create it displays an empty space beneath the Header component. If I try to go to the above address directly via url or by refreshing the page, it shows 404 page not found error.

The Login and Register components work absolutely fine as does the ProfileList (Clicking on a Link or direct navigation both work fine).

<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 - The below code worked for http://example.test/create AND for 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>

I'm using Laravel 7 to run my server. The routes/web.php file looks like this - 

<?php

Route::view('/{path?}', 'app');
react-router-dom react-router laravel
1 Answers

Here's hoping this helps someone.

The key lay in adding a match.path variable. Firstly my App.js file (the entry place for my app) - 

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>
        )
    }
}

Next the Profiles.js file which is handling the routing for profiles link.

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

I am still running into the problem of browser throwing 404s when trying to visit the url manually. I know that the answer lies in this answer by Stijn de Witt - I most likely want to do the catch-all solution that he has proposed, but I don't know how to do that. Can someone help?

user_8062560
Related