Это моя первая попытка построить RESTful Flask API с React на внешнем интерфейсе. Я столкнулся с проблемой рендеринга компонента React при переходе по URL /login
. вместо этого я получаю объект JSON, который возвращается с сервера. Вместо этого я хочу визуализировать LoginForm
компоненты, где я делаю запрос к /login
и печатать данные внутри компонента React. Как мне этого добиться?
Это моя файловая структура.
app/main/auth/views.py
@auth.route('/login', methods=['GET', 'POST'])
def login():
return jsonify(message="Login Page"), 200
Внутри /dist
папки у меня есть bundled.js
файл
Внутри /client
папка является основной index.html
, куда я включаю bundled.js
файл
app/__init__py
файл:
def create_app(config_name):
app = Flask(__name__, instance_relative_config=True,
static_folder="../client/dist",
template_folder="../client")
... rest configs
return app
Внешний интерфейс:
client/static/js/components/LoginForm.js
файл
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
message: {}
}
}
componentDidMount() {
const url = '/login';
fetch(url)
.then((res) => res.json())
.then(data => {
this.setState({
message: data
})
})
}
render() {
let items = this.state.message;
return (
<div className="content-section">
<h1>{items.message}</h1>
<form method="POST">
<div className="form-group">
<input type="email" className="form-control" />
</div>
<div className="form-group">
<input type="password" className="form-control" />
</div>
<input type="submit" className="btn btn-primary" value="Login" />
</form>
</div>
)
}
}
export default LoginForm;
components/App.js
Class App extends Component {
render() {
return (
<BrowserRouter>
<div className="container">
<Route path="/login" component={LoginForm} />
</div>
</BrowserRouter>
)
}
}
index.js
ReactDOM.render(<App />, document.getElementById("app"));