React Router 不在路径处渲染组件，返回具有正确路径的空白页面

Question

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

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

我试过...

• 让 router.js 文件只包含路由，以便获得相同的结果。这样做时还要指定确切的路径。
• 将 react-router-dom 重新安装到组件中，以防下载时出错。
• 删除提供程序以防出现问题
• 将router文件中的代码直接放在provider组件标签之间的App.js文件中

这些是涉及的文件。

Router.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;

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 Dev 工具中，它声明 Router.Consumer 有一个对象，该对象在展开时显示为空。

我的代码有什么问题？

https://codesandbox.io/s/youthful-maxwell-rch1k?fontsize=14

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

Answer 1

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

如果您将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;

Answer 2

我试过了，效果很好。我不知道为什么之前没有。如果有人有解释，请告诉我，因为我正在努力了解我最初做错了什么。

            <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;

@DLowther 还向我展示了另一个解决方案

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;

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