“rendering路由器- is”没有呈现任何内容

Question

我使用npx create-react-app web启动了一个基本的react项目，并使用npm start运行。我使用react-router-dom处理导航，该项目如下所示：

index.js

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


App.js:

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <div>
        I am at home, this should render as expected
      </div>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

class App extends Component {

    render(){
        return(
            <main>
                <Routes>
                    <Route path='/' element={Home} />                
                    <Route path='/About' element={About} />                
                </Routes>
            </main>
        )
    }


}

export default App;

当我去localhost:3000的时候，除了一张空白的页面，我什么也没看到，我在这里遗漏了什么？

Answer 1

使用以下方法更正语法：

class App extends Component {

    render(){
        return(
            <Router>
                <Routes>
                    <Route path='/' element={<Home/>} />                
                    <Route path='/About' element={<About/>} />                
                </Routes>
            </Router>
        )
    }


}

export default App;

如果没有，也可以导入这样的路由器，

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

我希望它能解决你的问题。

Answer 2

这是一个基本的语法问题，我不能删除这个问题，因为它已经被否决了。我看到了一些普遍的混乱，所以旧的方法：

<Route exact path="/" render={() => (<Foo/>)}/>

或

<Route path="/" element={Foo}/>

不再起作用了。以下是完整的工作示例：

这里有正确的语法：

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <div>
        I am at home, this should render as expected
      </div>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

class App extends Component {

    render(){
        return(
            <BrowserRouter>
            <Routes>
                <Route exact path='/' element={<Home/>}/>
                <Route exact path='/about' element={<About/>}/>
                <Route exact path='/dashboard' element={<Dashboard/>}/>
            </Routes>
            </BrowserRouter>
        )
    }


}