Question

我正在尝试导航到要在其上呈现新页面的/movie/:title。但是，仅当我的电影页面即/movie renders时才渲染，但是我不希望在导航到/movie/:title时装载我的电影页面。我只希望将其作为路径的一部分。精确设置/movie路径不能像/movie/:title那样正确，/movie不能正确渲染。

App.js

class App extends React.Component {
 render() {
  return (
   <div>
      <Header />
      <Route path='/movies' component={Movies} />
      <Route path='/tvshows' component={TvShow} />      
   </div>
)}

Movie.js

return (
   <div className="movies">
        <Route path={`${match.path}`} render={(props) => <CollectionGrid movies/>} />
        <Route path={`${match.path}`} render={(props) => <CollectionOverview movies/>} />
        <Route path={`${match.path}/:title`} component={ItemPage} />
   </div>
);

Answer 1

一些注意事项。按照惯例，您应该将所有路由都保存在一个路由器中，这样可以更轻松地导航和标识您的应用程序。

像这样组织路由器：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./Home";
import Movies from "./Movies";
import ItemPage from "./ItemPage";

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/movies/:title" component={ItemPage} />
          <Route path="/movies" component={Movies} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

另外，要解决您的解决方案，您将需要Switch中可用的react-router-dom组件。 Switch组件将浏览Routes的列表，并且只会呈现URL字符串中包含Route字符串的第一个path人

在上面的列表中，我们有3条路线。如果您的URL是"/movies/blah"，它将仅呈现ItemPage组件，因为该路由的path在列表中首先匹配。

出于这个原因，我们将"/movies/:title"路线移到了常规"/movies"之前。如果"/movies"路由出现在列表的首位，并且您的URL为"/movies/blah"，则它仍将满足"/movies"路由。这意味着Switch只会渲染Movies组件，这不是您想要的。

查看有效的沙箱：https://codesandbox.io/s/hopeful-bogdan-lzl76

Answer 2

您无法在此应用中直接访问匹配项，而在this .props.match中找到了匹配项您可以在

中使用它

const App({match})

然后当您需要使用它时

<Route path={`${match.path}`} render={(props) => <CollectionGrid movies/>} />

look to this example and explain

为什么没有父路径渲染就不会渲染子路径？

2 个答案: