`react-router-dom` 没有渲染任何东西

Question

我使用npx create-react-app web开始了一个基本的反应项目，并使用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;

当我 go 到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

这是一个语法问题。 这是正确的语法：

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>
        )
    }


}