React 路由器：可选参数

 1class App extends Component {
 2  render() {
 3    return (
 4      <BrowserRouter>
 5        <div>
 6          {/* Optional parameters are defined by placing a question mark at the end of a parameter. */}
 7          {/* In this case, `line` is an optional parameter. */}
 8          {/* Optional parameters will be passed to the component, but will be undefined if not present in the URL. */}
 9          <Route path="/Lyrics/:song/:line?" component={LyricSheet}/>
10        </div>
11      </BrowserRouter>
12    );
13  }
14}

 1export default function LyricSheet({ match }) {
 2  const {line, song} = match.params;
 3  // Since `line` is an optional parameter, it'll either be undefined or a string.
 4  const lineNumber = line ? parseInt(line, 10) : -1;
 5  // Get the lyrics to the song.
 6  const lyrics = getLyrics(song)
 7    // Map the lyrics to components. If `index` is `lineNumber`, set `highlight` to `true`.
 8    .map((lyric, index) => (<LyricLine highlight={index === lineNumber} key={index} lyric={lyric} />));
 9  return (
10    <div>{lyrics}</div>
11  );
12}