Question

我正在尝试使用 react-router-dom 在我的网站中创建多个页面，但它在进入我输入的路径时所提供的只是一个空白页面。它也不显示任何错误。我看到了与此相关的另一个答案，但它们对我没有帮助。我在这里做错了什么？ Collection.js 是我正在尝试使用的组件。

App.js

import React from 'react';
import './App.css';
import Header from './Components/Header';
import Home from './Components/Home';
import { BrowserRouter as Router, Route, Link, Switch, withRouter } from "react-router-dom";
import Collection from './Components/Collection';


function App() {
  return (
    <div className="App">
    <Router>
      <Switch>
        <Route exact path="/">
        <Header/>
        <Home/>
        </Route>
        <Route path='/collection' component={Collection} />
      </Switch>
    </Router>
    </div>
  );
}

export default App;

Collection.js

import React from 'react'

function Collection() {
    return (
        <div>
            <h1>Hello</h1>
        </div>
    )
};

export default Collection;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';

ReactDOM.render((
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
  ,
  document.getElementById('root')
);

serviceWorker.unregister();

我不知道这是否有什么不同，但我正在使用 Redux。

React路由器dom给出一个空白页面

0 个答案: