Question

react-router-dom不渲染组件，但它更改了url，如何在不重新加载的情况下进行渲染？

我遇到了这个问题的大麻烦，代码适用于create-react-app但不适用于python flask服务器。

它不适用于BrowserRouter或HashRouter。

我的项目基于this one.

并且状态不起作用here.如果您更喜欢在github上查看代码，我建议先开始查看app.py，然后再查看templates文件夹中的index.html，然后查看js文件夹中的app.js和Hello.js。

我的app.py（服务器）

from flask import Flask, render_template, send_from_directory
WSGI_APLLICATION = Flask(__name__)
WSGI_APLLICATION.config['TEMPLATES_AUTO_RELOAD'] = True

@WSGI_APLLICATION.route('/<path>')
@WSGI_APLLICATION.route('/')
def hello_world(path=''):
    return render_template('index.html')
if __name__ == '__main__':
    WSGI_APLLICATION.run(host='0.0.0.0', debug=True, port=8080)

这是我的app.js（只是渲染<Hello/>）

import Hello from './Hello';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<Hello/>, document.getElementById('reactEntry'));

这是我的Hello.js（react-router-dom）

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
class Hello extends Component{
  render() {
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    )
    const About = () => (
      <div>
        <h2>About</h2>
      </div>
    )
    const Topics = () => (
      <div>
        <h1>Topics</h1>
      </div>
    )
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/topics">Topics</Link></li>
          </ul>
          <Route exact path="/" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/topics" component={Topics}></Route>
        </div>
      </Router>
    );
  }
}

export default Hello;

我认为这个问题很严重，或者我不明白react-router-dom是如何工作的。

编辑：我发现问题不在于烧瓶，因为我使用与bundle.js npm run build

创建的另一个create-react-app相同的app.py

额外的“问题”（奖励积分）我不想在index.html上做那些随机的东西，因为bundle.js从缓存加载并请求它（再次，也许它是烧瓶或我不知道缓存是如何工作的）。如何让它执行请求而不从缓存加载？

react-router-dom不是渲染组件，但它更改了url，如何在不重新加载的情况下进行渲染？

0 个答案: