為什么我的 React 路由器無法正常運行？

Question

我使用 react 和 laravel 開發了一個應用程序來顯示酒店列表。 當用戶單擊單個酒店時，我希望該酒店的詳細信息顯示在“單個”視圖中。 但是，盡管在主列表視圖中我使用正確的路由模式鏈接到單個頁面，並且我已經在路由器中定義了模式，但當我單擊鏈接時，我會被帶到“404 未找到”頁面。

用於編輯帖子的編輯鏈接也是如此。

任何有關如何解決此問題的想法將不勝感激！

謝謝，

羅伯特楊

英國倫敦

//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. <a/>標簽中的調度 onClick 事件導致頁面刷新並且您的服務器沒有任何匹配的路由：

我建議您使用Link而不是<a/> ，因為它在內部使用歷史記錄並且也不會觸發整個頁面刷新，而<a />標簽自然會：

替換這個：

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

對此：

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