React Router Switch 未渲染特定组件

Question

我有一个当前使用 react-router@4.2.0 的 React 应用程序，当 URL 更改时，我正在努力渲染特定组件。

当我尝试访问 /locations/new 时，它会返回来自 CityList 组件的 PropTypes 错误。我尝试将 exact 添加到 LocationsWrapper 中的 Route 组件中，然后添加到 Main 配置中，但是，这会影响其他路由 - 例如 /locations 变为 null。

// 浏览器路由器

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";

import store from "./store";
import Navbar from "./components/Core/Navbar";
import Routes from "./config/routes";

render(
  <Provider store={store}>
    <BrowserRouter>
      <div style={{ backgroundColor: "#FCFCFC" }}>
        <Navbar />
        <Routes />
      </div>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

// 路由器配置 - (Routes)

import React from "react";
import { Route, Switch } from "react-router-dom";

import Home from "../components/Home";
import Locations from "../components/Locations";
import CityList from "../components/CityList";
import CreateLocation from "../components/CreateLocation";
import Locale from "../components/Locale/index";
import Profile from "../components/Profile";
import NoMatch from "../components/Core/NoMatch";

import requireAuth from "../components/Core/HOC/Auth";

const LocationsWrapper = () => (
  <div>
    <Route exact path="/locations" component={Locations} />
    <Route path="/locations/new" component={CreateLocation} />
    <Route path="/locations/:id" component={CityList} />
  </div>
);

const Main = () => (
  <main>
    <Switch>
      <Route exact path="/" component={requireAuth(Home)} />
      <Route path="/locations" component={LocationsWrapper} />
      <Route path="/locale/:id" component={Locale} />
      <Route path="/profile" component={requireAuth(Profile, true)} />
      <Route component={NoMatch} />
    </Switch>
  </main>
);

export default Main;

我是否最好完全避免 <Switch> 并为未定义的路由实施新方法 - 例如 404s？

Answer 1

是的，这肯定会先返回

<Route path="/locations/:id" component={CityList} />

在 react-router 4 中没有索引路由的概念，它会检查每一个路由，所以在你定义的路由中是相同的

<Route path="/locations/new" component={CreateLocation} />
<Route path="/locations/:id" component={CityList} />

两个路径都相同 '/location/new' 和 '/location/:id' 所以 /new 和 /:id 是相同的参数。

所以最后'CityList'会返回

你可以这样定义

<Route path="/locations/create/new" component={CreateLocation} />
<Route path="/locations/list/:id" component={CityList} />

Answer 2

很确定您的路线不起作用，因为您还将参数与 /locations/new 与 /locations/:id 匹配，因此“新”成为 Id 参数。

尝试更改此设置

   <Route path="/locations/new" component={CreateLocation} />

这样的事情

   <Route path="/locs/new" component={CreateLocation} />

只是一个建议，希望对你有帮助