React Route 和 Switch 不起作用。路径不渲染答案

【问题标题】：React Route and Switch is not working. The path renders nothingReact Route 和 Switch 不起作用。路径不渲染
【发布时间】：2021-04-02 18:58:35
【问题描述】：

我是新来的反应，我正在尝试制作路线，但它无法正常工作。

这是我的代码：

<div className = "music-box">
  <Switch>
    <Route exact path = "/">
      <div id = "trending-container" className = "user-musics">
        {musics && musics.map((name, i)=>{   
          return(
            <Fragment key = {i}>
              <MusicPreview 
                 name = {name} 
                 play = {play} 
                 uID = {name.userID} 
                 userName = {currentUserName} 
                 pfp= {name.pfpURL} 
                 user = {name.artist}
              />
            </Fragment>
          )
        })}
      </div>
    </Route>
    <Route exact path = {"/results"}>
      <div className = "user-musics">
        results
      </div>
    </Route>
  </Switch>                    
</div>

每当我转到http://localhost:3000/results 时，页面都是空白的，并且没有呈现任何内容。

【问题讨论】：

删除{和}到<Route exact path = {"/results"}>
我试过了，但是没用

标签： javascript reactjs react-router create-react-app react-router-dom

【解决方案1】：

在 Route 中使用 jsx 可以，但最好创建组件并在 Route 上调用它们，如下所示：<Route exact path="/" component={Home} />

这是一个有效的codesandbox

【讨论】：

我曾想过使用component，但不知道如何使用component 发送props

【解决方案2】：

您需要将Switch 和Route 放入BrowserRouter。

<div className="music-box">
  <BrowserRouter>
    <Switch>
      <Route exact path="/">
        <div id="trending-container" className="user-musics">
          {musics &&
            musics.map((name, i) => {
              return (
                <Fragment key={i}>
                  <MusicPreview
                    name={name}
                    play={play}
                    uID={name.userID}
                    userName={currentUserName}
                    pfp={name.pfpURL}
                    user={name.artist}
                  />
                </Fragment>
              );
            })}
        </div>
      </Route>
      <Route exact path={'/results'}>
        <div className="user-musics">results</div>
      </Route>
    </Switch>
  </BrowserRouter>
</div>

【讨论】：