【问题标题】：Cannot get props to pass through variable path /:id, react router dom无法通过变量路径/：id获取道具，反应路由器dom
【发布时间】：2021-01-25 00:14:04
【问题描述】：

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;

【问题讨论】：

标签： reactjs react-router-dom

【解决方案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>

【讨论】：