javascript - 使用 React Router 在 React 中创建一个新页面

Question

我已经按照文档进行了操作，但我的代码中可能有错字或其他原因，因为它不起作用。

在 index.js 中：

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

应用程序.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 } from 'react';
import './App.css';
class Page extends Component {
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.props.response }} />;
  }
}
export default Page;

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

数据肯定来自服务器，如果它显示在 App.js 中很好，但是当我将它发送到 Page 时它不起作用。

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

你需要更换路由器标签

<Router> 

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

<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;