ReactJS Flask: одна ссылка на веб-страницу продолжает использовать неправильный порт 5000 на локальном хосте вместо правильного порта 3000

Question

У меня есть веб-сайт с ReactJS интерфейсом и Python - Flask бэкэндом со ссылкой, как на главной странице http://localhost: 3000 /. У меня 4 страницы, и 3 из них делают правильные вещи от go до http://localhost: 3000 / page1, et c. Однако на одной из 4 страниц (/ sea в приведенном ниже примере), когда я нажимаю на ссылку, я всегда попадаю в http://localhost: 5000 / sea, который определенно не найден. Я могу вручную изменить 5000 на 3000, и страница работает отлично, но я не уверен, что именно заставляет одну из четырех ссылок, которые я нажимаю, использовать порт 5000 вместо 3000. Весь мой код для перехода на 3 веб-сайта точно такой же тот же самый. Вот приложение. js файл:

<div>
                <BrowserRouter>
                <Navigation/>
                    <Switch>
                        <Route path="/villagers" component={Villagers}/>
                        <Route path="/songs" component={Songs}/>
                        <Route path="/sea" component={Sea}/>
                        <Route path="/seadetail" component={SeaMuseum}/>
                        <Route path="/" component={FrontPage}/>
                    </Switch>
                </BrowserRouter>
            </div>

Что касается python Flask серверной части main.py "

@app.route('/')
@app.route('/villagers/')
@app.route('/songs/')
@app.route('/sea/')
@app.route('/seadetail/')
def index():
    return app.send_static_file('index.html')

Answer 1

Вам следует сделать exact, если вы не планируете использовать некоторые параметры маршрута.

<Route exact path='/sea' component={Sea} />

Также может быть тот факт, что ваш package. json имеет "домашнюю страницу", установленную на "http://localhost: 5000 "или" прокси "установлен на" http://localhost: 5000 "(вы должны удалить их, если они были установлены)

и вы сделали <a href="/sea">Hey go to sea</a>

Я бы порекомендовал вам использовать

import { Link } from 'react-router-dom';

and <Link to='/sea'>Click to go to Sea</Link>

Кроме того, я предполагаю, что здесь вы используете приложение create-response-app. Сервер разработки вашего приложения create-response-app работает на порту 3000. Итак, если вы направляете своего пользователя на localhost: 5000 / sea, ваш сервер flask будет получателем запроса.

Также я пытаясь понять ваш вариант использования. Итак, вы статически обслуживаете файл public / index. html своего приложения create-response-app? Я думаю, вам следует сначала создать свое приложение для реагирования и выполнить сборку / индекс. html файл

Что-то вроде этих строк

app = Flask(__name__, static_folder='project/build')

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    if path != '' and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    return send_from_directory(app.static_folder, 'index.html')




if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True)