53

オンライン チュートリアルで自分自身に反応することを学んでいます。

これは、React Router の使用に関する基本的な例です。

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </Route>
</Router>

私のアプリコンポーネントで:

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
              <li><Link to="home">Home</Link></li>
              <li><Link to="about">About</Link></li>
              <li><Link to="contact">Contact</Link></li>
           </ul>
          {this.props.children}
        </div>
     )
   }
}
export default App;

しかし、IndexRoute を使用すると何も表示されないので問題があるため、npm で react-router-dom v4 のモジュールを検索すると、内部に IndexRoute がありません。代わりにこれを使用します：

<Router>
  <div>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  </ul>
  <hr/>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/contact" component={Contact}/>
  </div>
</Router>

では、1つのパスに対して2つのコンポーネントをレンダリングするにはどうすればよいですか?

4

5 に答える 5

16

反応ルーター & もうありませIndexRouteん

<Route exact path="/" component={Home}/>に等しい<IndexRoute component={Home}/>

// Switch

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

import { Switch, Route } from 'react-router'

<Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/:user" component={User}/>
    <Route component={NoMatch}/>
</Switch>


/* there will only ever be one child here */

<Fade>
    <Switch>
        <Route/>
        <Route/>
    </Switch>
</Fade>

<Fade>
    <Route/>
    <Route/>
</Fade>

/* there will always be two children here, one might render null though, making transitions a bit more cumbersome to work out */

参考文献

https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220

https://reacttraining.com/react-router/web/api/Switch

于 2017-07-23T09:05:39.240 に答える