reactjs - 在 React-Router-Dom 中，我的链接正在更改 url，但它没有呈现匹配的组件或将任何道具传递给 this.props.child

Question

这是在 ReactDOM.render[index.js] 里面

  <Router history={hasHistory}>
  <Route component={App}>
        <IndexRoute path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/Blog" component={Blog} />
        <Route path="/Trust" component={Safety} />
  </Route>

#下面的代码在App.js中

  <div>
    <div>
    {this.props.children || <Home/>}
    </div>
    <Footer/>
  </div>

上面的代码在Footer.js[Link used]

  <Row>
<Col md={8} id="footernav">
 <ul>
<li><Link to="/">Home </Link></li>
<li><Link to="/about">About </Link></li>
<li><Link to="/Blog">Blog</Link></li>
<li><Link to="/Terms">Terms & Condition</Link></li>
<li><Link to="/PrivacyPolicy">Privacy Policy</Link></li>
<li><Link to="/Trust">Trust & Safety</Link></li>
<li><Link to="/Help">Help</Link></li>
 </ul>
 </Col>
 </Row>

上面的代码在footer.js里面

Answer 1

看起来您的路由器未正确实施。你可以像这样修改它：

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />
    <Route path="about" component={About} />
  </Route>
</Router>

为了简洁起见，我将其缩短了。注意三个主要区别：

1. 第一个路由路径有默认路径，即“/”
2. IndexRoute 指的是父 Route 路径，所以它根本没有路径
3. 嵌套路由的路径中没有“/”，因为它们安装在主路由的顶部。

让我知道事情的后续 ;）