反应路由器不渲染

Question

我一直在学习关于 react 的在线课程，但它有点过时了，我一直在努力通过所有课程来理解在应用新语法而不是视频中显示的语法时解释的概念。我总是或多或少地管理，但现在我被卡住了，因为在添加反应路由器 dom Web 应用程序后，我的页面不再呈现。没有显示错误或警告，无论我看多少，我似乎都找不到错误。我的主要现在看起来像这样：

import React from 'react';
import Header from './header';
import MyPlacesList from './myplaceslist.js';
import Footer from './footer';
import CreatePlace from './createPlace.js';
import * as attAPI from '../utils/attractionsAPI';
import { Router, Route } from 'react-router-dom';

class Main extends React.Component{

  state = {
    attractions: [],
  }

  componentDidMount(){
    attAPI.getAll().then((attractions) => {
      this.setState({attractions})
    })
  }

  removePlace = (attraction) => {
    this.setState((state) => ({
      attractions: state.attractions.filter((attr) => attr.id !== attraction.id)
    }))
    attAPI.remove(attraction);
  }

  render(){
    return (
      <Router>
        <Fragment>
          <Header titolo = 'My Places' sottotitolo = 'I miei posti preferiti'/>
          <Route exact path = '/' render =  {() => (
            <MyPlacesList attractions = {this.state.attractions}
            onRemovePlace = {this.removePlace} />
          )}/>
          <Route path = '/create' render = {() => (
            <CreatePlace />
          )}/>
          <Footer />
        </Fragment>
      </Router>
    )
  }
}

export default Main;

这是标题：

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Icon from '@mui/material/Icon';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import { Link } from 'react-router-dom';

class Header extends React.Component{
  render(){
  //   return <nav>
  //   <div className = "nav-wrapper">
  //     <a href = "#" className = "brand-logo">{this.props.titolo}</a>
  //   </div>
  // </nav>

return <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <Typography
              variant="h6"
              noWrap
              component="div"
              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
            >
              {this.props.titolo}
            </Typography>
            <Link to = '/create'>
            <IconButton>
               <AddCircleIcon />
            </IconButton>
            </Link>
          </Toolbar>
        </AppBar>
      </Box>
  }
}

export default Header;

在添加反应路由器 dom 之前，我使用状态调用组件 MyPlacesList/CreatePlace（createPlace 仅在我单击按钮时显示）并且它工作得很好，在我尝试使用 <Route> 后出现了问题。我该如何解决这个问题？提前谢谢你！

编辑 - 这也是我的索引页：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Main from './components/main';
import { BrowserRouter } from 'react-router-dom';

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

Answer 1

需要纠正的地方

1. 使用 React.Fragment 而不仅仅是 Fragment 或从 react 导入。
2. 添加Routes组件之间的所有路由。
3. 您已经在 index.js 中添加了Router 或BrowserRouter，因此无需再次添加。

第 5 版中的嵌套发生了变化。

所以最终嵌套应该在版本 6 中

<BrowserRouter>
  <Routes>
    <Route>
    <Route>
  </Routes>
</BrowserRouter>

import MyPlacesList from "./myPlacesList.js";
import CreatePlace from "./createPlace.js";
import { Route, Routes } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div>Some Header component</div>
        <Routes>
          <Route
            exact
            path="/"
            render={() => (
              <MyPlacesList
                attractions={this.state.attractions}
                onRemovePlace={this.removePlace}
              />
            )}
          />
          <Route path="/create" render={() => <CreatePlace />} />
        </Routes>
      </React.Fragment>
    );
  }
}

export default App;