Javascript 在React with React Router中创建新页面

我已经阅读了文档，但可能是因为代码不起作用而导致代码输入错误

在index.js中：

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

ReactDOM.render(
,
document.getElementById（'root'））
);

App.js：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Page from './Page';
import './App.css';
class App extends Component {
  state = {
    response: '',
    post: '',
    responseToPost: '',
  };
  componentDidMount() {
    this.getData();
  }

  getData = async () => {
    const response = await fetch('/api/world', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();
    this.setState({ responseToPost: body });
  };
  render() {
    return (
      <div className='App'>
        <p>{this.state.response}</p>
        <Router>
          <Route
            exact
            path='/pages'
            component={<Page response={this.state.responseToPost} />}
          />
        </Router>
      </div>
    );
  }
}
export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./Page”导入页面；
导入“/App.css”；
类应用程序扩展组件{
状态={
答复：“”，
帖子：''，
回复帖子：''，
};
componentDidMount（）{
这是getData（）；
}
getData=async（）=>{
const response=wait fetch（“/api/world”{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
body:JSON.stringify（{post:this.state.post}），
});
const body=wait response.text（）；
this.setState（{responseToPost:body}）；
};
render（）{
返回(
{this.state.response}

);
}
}
导出默认应用程序；

和页面组件：

import React, { Component } from 'react';
import './App.css';
class Page extends Component {
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.props.response }} />;
  }
}
export default Page;

import React，{Component}来自'React'；
导入“/App.css”；
类页面扩展组件{
render（）{
返回；
}
}
导出默认页面；

这些页面上没有加载任何内容。怎么了

---

数据确实来自服务器，如果它显示在App.js中，这很好，但当我将其发送到页面时，它不起作用。

您需要替换路由器标签

<Router> 

使用开关标签，而不是应该工作

<Switch> 

就这样

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Page from './Page';
import './App.css';
class App extends Component {
  state = {
    response: '',
    post: '',
    responseToPost: '',
  };
  componentDidMount() {
    this.getData();
  }

  getData = async () => {
    const response = await fetch('/api/world', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();
    this.setState({ responseToPost: body });
  };
  render() {
    return (
      <div className='App'>
        <p>{this.state.response}</p>
        <Switch>
          <Route
            exact
            path='/pages'
            component={<Page response={this.state.responseToPost} />}
          />
        </Switch>
      </div>
    );
  }
}
export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./Page”导入页面；
导入“/App.css”；
类应用程序扩展组件{
状态={
答复：“”，
帖子：''，
回复帖子：''，
};
componentDidMount（）{
这是getData（）；
}
getData=async（）=>{
const response=wait fetch（“/api/world”{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
body:JSON.stringify（{post:this.state.post}），
});
const body=wait response.text（）；
this.setState（{responseToPost:body}）；
};
render（）{
返回(
{this.state.response}

);
}
}
导出默认应用程序；

获取后的

responseToPost

状态是什么？@ChunkyChunk我不理解这个问题当应用程序组件第一次呈现时，其状态包含一个初始化为空字符串的属性

responseToPost

。然后，当安装应用程序组件时，将执行一个HTTP请求，该请求完成后，将HTTP响应中的

responseToPost

值设置为

text（）

。

responseToPost

状态属性的新值是多少？一个更好的问题-当执行HTTP请求时，完整的

App

状态是什么？

开关在这里不是必需的。OP只想看到他们的单条
路线
呈现。前任：