为什么我的React路由器不能正常工作？

Question

我使用react和laravel开发了一个应用程序来显示酒店列表。当用户点击一个单一的酒店，我希望该酒店的细节显示在一种类型的‘单一’视图。然而，尽管在主列表视图中，我使用正确的路由模式链接到单个页面，并且我在路由器中定义了该模式，但当我单击该链接时，我会被带到一个“404 not found”页面。

编辑文章的编辑链接也是如此。

任何关于如何解决这个问题的想法都将非常感谢！

谢谢,

罗伯特·杨

英国伦敦

//app.js（路由器）

    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（列表页面）

    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

如果您正在从web服务器获取404，这意味着：

1. 标记中的调度onClick事件会导致页面刷新，而您的服务器没有任何匹配的路由:

我建议您使用链接而不是，因为它在内部使用历史记录，并且不会触发整个页面刷新，而标记自然会：

替换此：

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

对此：

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