javascript - React Route and Switch is not working. The path renders nothing

Question

I am new to react and I was trying to make routes but its not working properly.

Here is my code:

<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>

Whenever I go to http://localhost:3000/results the page is blank and its not rendering anything.

Answer 1

你需要把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>

Answer 2

在里面使用 jsxRoute会起作用，但最好是创建组件并Route像这样调用它们：<Route exact path="/" component={Home} />

这是一个有效的代码框