时间戳

首页 > 解决方案 > 为什么 React Router 中的“exact”关键字给了我一个空白页？

react-router-dom - 为什么 React Router 中的“exact”关键字给了我一个空白页？

问题描述

我有下面的代码，但只有 Home 组件会为“/”和“/join”路径呈现 - 即使在“/join”之后放置“/”之后也是如此。

当我使用该exact属性时，我得到两个路径的空白页。

import Home from './Home';
import JoinRoom from './JoinRoom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

const App = () => {
    return (
        <div>
            <Router>
                <Switch>
                    <Route path='/join' component={JoinRoom} />
                    <Route path='/' component={Home} />
                </Switch>
            </Router>
        </div>
        )
    }
    
export default App

我还包括以下依赖项：

 "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "2.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }

我能做些什么来解决这个问题？谢谢。

编辑：我应该补充一点，React Router 在一个简单的 React 应用程序上运行良好。我的问题是当我尝试将它集成到 Django 时。

标签： react-router-dom

解决方案

不知道为什么它不适合你（也许是你从页面重定向到另一个页面的方式）。

无论如何，我创建了和你一样的应用程序，它对我有用。

也许您将能够找到差异。

以 Codesandbox 为例

推荐阅读