无法让道具通过可变路径/：id，反应路由器dom

Question

console.log 确认用户输入“searchTerm”被 onClick 函数从组件中提升。

然后保存到handleClick函数中的状态。

但它没有通过到第二条路线。

    function App() {
      const [searchResults, setSearchResults] = useState([]);
      const [searchTerm, setsearchTerm] = useState('')
      const [single, setSingle] = useState();

      const fetchData = async (searchTerm) => {
        setsearchTerm(searchTerm)
        try {
          const { data } = await axios.get(`/data/${searchTerm}.json`)
          console.log(data)
          setSearchResults(data)
        } 
        catch(err) {
          const empty = [];
          setSearchResults(empty)
          console.log(err)
        }
      }

下一步，将 props 传递给 'SearchResultSingle' 组件，也就是第二条路线

console.log 显示 'searchTerm' 从组件 onClick 上升起，然后保存到下面函数中的状态，但它没有通过第二条路线。

      const handleClick = data => {
        console.log('click', data.clip)
        setSingle(data.clip)
      }

      return (
        <Router>
          <div>
            <SearchForm fetchData={fetchData}/>
            <Child searchTerm={searchTerm} />
            <Switch>
              <Route 
                path="/" 
                render={props=>
                  <SearchResults {...props} 
                  searchResults={searchResults}
                  searchTerm={searchTerm}
                  handleClick={handleClick}/>
                } 
              />

第二条路线，道具不通过

              <Route 
                exact
                path={`/${searchTerm}/:id`} 
                render={props=>
                  <SearchResultSingle {...props} 
                  searchTerm={searchTerm}
                  searchResults={searchResults}
                  single={single}/>
                } 
              />

            </Switch>
          </div>
        </Router>
      );
    }

    export default App;

Answer 1

问题

Switch 组件返回并呈现第一个 Route 或 Redirect 以匹配路径。 path="/" 将匹配 任何 路径，因此将始终由 Switch 匹配、返回和呈现。

解决方案

重新排序您的路线以指定更多特定路径之前 更少特定路径。

<Switch>
  <Route 
    path={`/${searchTerm}/:id`} 
    render={props=>
      <SearchResultSingle
        {...props} 
        searchTerm={searchTerm}
        searchResults={searchResults}
        single={single}
      />
    } 
  />
  <Route 
    path="/" 
    render={props=>
      <SearchResults
        {...props} 
        searchResults={searchResults}
        searchTerm={searchTerm}
        handleClick={handleClick}
      />
    } 
  />
</Switch>