Reactjs React Router未在路径处呈现组件，返回具有正确路径的空白页

React Router似乎在我的应用程序中工作，除了我得到的是一个空白页面而不是我的组件，即使它指向正确的路径

我正在扫描文档，但在查看并搜索Google/此网站后，我无法自行解决该问题

我试过

• 使router.js文件只包含路由，以获得相同的结果。执行此操作时也指定精确路径
• 将react router dom重新安装到组件中，以防下载时出错
• 如果出现问题，请删除提供程序
• 将代码直接放在App.js文件中的路由器文件中的提供者组件标记之间

这些是涉及的文件

路由器.js

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Redirect from='/' to='/landing' />
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
        </Switch>
     );
}

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“../scenes/LandingPage”导入LandingPage；
从“../scenes/CityPage”导入城市页面；
常数路由器=（）=>{
报税表（
);
}
导出默认路由器；

App.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./services/Router";
import ChosenCityContextProvider from "./services/context/ChosenCityContext";

const App = () => {
  return (
    <BrowserRouter>
      <ChosenCityContextProvider>
        <Router />
      </ChosenCityContextProvider>
    </BrowserRouter>
  );
};

export default App;

从“React”导入React；
从“react router dom”导入{BrowserRouter}；
从“/services/Router”导入路由器；
从“/services/context/ChosenCityContext”导入ChosenCityContextProvider；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

呈现站点时不会出现任何错误消息。除了空白页之外，其他所有的东西似乎都在工作。在React-Dev工具中，它声明Router.Consumer有一个对象，该对象在展开时显示为空

我的代码有什么问题

---

上面是代码沙箱。我这里也有同样的问题

我试过这个，效果很好。我不知道为什么以前没有。如果有人有解释，请让我知道，因为我正试图了解我最初做错了什么

            <Route render={() => <Redirect from='/' to='/landing' />} />

} />

我添加了上面的内容，所以我的路由器文件看起来像这样

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
            <Route render={() => <Redirect from='/' to='/landing' />} />
        </Switch>
     );
}

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“../scenes/LandingPage”导入LandingPage；
从“../scenes/CityPage”导入城市页面；
常数路由器=（）=>{
报税表（
} />
);
}
导出默认路由器；

@德洛瑟还向我展示了另一种解决方案

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Page from "./Page";
import Home from "./Home";

const Router = () => {
  return (
    <Switch>
      <Redirect exact from="/" to="/home" />
      <Route path="/home" component={Home} />
      <Route path="/page" component={Page} />
    </Switch>
  );
};

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“/Page”导入页面；
从“/Home”导入主页；
常数路由器=（）=>{
返回(
);
};
导出默认路由器；

---

我想感谢这个人回答了我的问题

我尝试了这个，它成功了。我不知道为什么以前没有。如果有人有解释，请让我知道，因为我正试图了解我最初做错了什么

            <Route render={() => <Redirect from='/' to='/landing' />} />

} />

我添加了上面的内容，所以我的路由器文件看起来像这样

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
            <Route render={() => <Redirect from='/' to='/landing' />} />
        </Switch>
     );
}

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“../scenes/LandingPage”导入LandingPage；
从“../scenes/CityPage”导入城市页面；
常数路由器=（）=>{
报税表（
} />
);
}
导出默认路由器；

@德洛瑟还向我展示了另一种解决方案

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Page from "./Page";
import Home from "./Home";

const Router = () => {
  return (
    <Switch>
      <Redirect exact from="/" to="/home" />
      <Route path="/home" component={Home} />
      <Route path="/page" component={Page} />
    </Switch>
  );
};

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“/Page”导入页面；
从“/Home”导入主页；
常数路由器=（）=>{
返回(
);
};
导出默认路由器；

---

我想感谢这个人回答了我的问题

我不确定这到底是为什么解决了这个问题，但我在一个工作项目中遇到了这个问题，所以我知道它是有效的

如果将

exact

添加到重定向元素中，则会强制执行正确的行为

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Redirect exact from='/' to='/landing' />
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
        </Switch>
     );
}

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“../scenes/LandingPage”导入LandingPage；
从“../scenes/CityPage”导入城市页面；
常数路由器=（）=>{
报税表（
);
}
导出默认路由器；

我不确定这究竟是为什么解决了这个问题，但我在一个工作项目中遇到过这个问题，所以我知道它是有效的

如果将

exact

添加到重定向元素中，则会强制执行正确的行为

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Redirect exact from='/' to='/landing' />
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
        </Switch>
     );
}

export default Router;

从“React”导入React；
从“react router dom”导入{Route，Switch，Redirect}；
从“../scenes/LandingPage”导入LandingPage；
从“../scenes/CityPage”导入城市页面；
常数路由器=（）=>{
报税表（
);
}
导出默认路由器；

您可以将jsfidle链接包含到您的问题中吗。调试您的代码很容易：）我将很快构建一个沙盒。我不确定为什么这样做，但如果您在沙盒中添加

exact

，您的页面将呈现在沙盒中。@DLowther请写一个答案，这样我可以给您打分。我在回答我的问题时提出了你的解决方案，但我想接受你的回答，因为我没有想到这一点。你可以将jsfidle链接包含到你的问题中吗。调试您的代码很容易：）我将很快构建一个沙盒。我不确定为什么这样做，但如果您在沙盒中添加

exact

，您的页面将呈现在沙盒中。@DLowther请写一个答案，这样我可以给您打分。我在回答我的问题时给出了你的答案，但我想接受你的答案，因为我没有想到这一点。渲染方法在很多情况下也非常有用。我们使用它来检测私有路由（您可以提取包装器组件），并有条件地呈现登录屏幕或请求的路由。感谢您提供更多信息@DLowther！我很高兴知道这种特殊格式的不同用例。渲染满足