为什么我的 React 路由器无法正常运行？

Question

I have developed an application using react and laravel to show a list of hotels. When the user clicks on a single hotel, I want details of that hotel to show up in a type of 'single' view. However, although in the main list view I am linking to the single page using the correct routing pattern, and I have defined the pattern in the router, when I click on the link I get taken to a '404 not found' page.

The same goes for the edit link for editing a post.

Any ideas as to how to solve this issue would be much appreciated!

Thanks,

Robert Young

London, UK

//App.js (router)

    import React, { Component } from 'react'
    import ReactDOM from 'react-dom'
    import { BrowserRouter, Route, Switch } from 'react-router-dom'
    import Main from './Main'
    import Header from './Header'
    import SingleHotel from './SingleHotel'
    import CreateHotel from './CreateHotel'
    import EditHotel from './EditHotel'
    
    class App extends Component {
        render() {
            return (
                <BrowserRouter>
                    <div>
                        <Header />
                        <Switch>
                            <Route exact path='/' component={Main} />
                            <Route exact path='/hotels/:id' component={SingleHotel} />
                            <Route exact path='/create' component={CreateHotel} />
                            <Route exact path='/hotels/edit/:id' component={EditHotel} />
                        </Switch>
                    </div>
                </BrowserRouter>
            )
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

// Main.js (listing page)

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import { Link } from 'react-router-dom';
    
    
    class Main extends Component {
    
        constructor(){
    
            super();
    
            this.state = {
                hotels: [],
            }
        }
    
        componentDidMount(){
            
            fetch('/api/hotels')
                .then(response => {
                    
                    return response.json();
                })
                .then(hotels => {
                    this.setState({ hotels });
                })
        }
    
        renderHotels() {
             return this.state.hotels.map(hotel => {
                return (
                    <li className="row hotel-row" key={hotel.hotel_id} >
                        <span className="col-sm-10">
                            <a href={`hotels/${hotel.hotel_id}`}>{ hotel.hotel_name }</a>
                        </span>
                        <span className="col-sm-2">
                            <a href={`/hotels/edit/${hotel.hotel_id}`}>Edit</a>
                        </span>
                    </li>
                        
    
                );
             })
        }
    
        render () {
            
            return (
                <div className="hotels container">
                    <ul>
                        { this.renderHotels() }
                    </ul>
                    <a className="btn btn-success create-hotel" href="/create">Add a new hotel</a>
                </div>
    
            );
        }
    }
    
    export default Main

Answer 1

If you are getting the 404 from your web server that means:

1. Dispatch onClick event in <a/> tag causes a page refresh and you server doesn't have any matching route:

I recommend you to use Link instead of <a/> , because it internally use history and also won't trigger a full page refresh while an <a /> tag naturally will:

Replace this:

 <a href={`/hotels/edit/${hotel.hotel_id}`}>Edit</a>

To this:

 <Link to={`/hotels/edit/${hotel.hotel_id}`}>Edit</Link>