Question

我的根组件如下所示：

bp_Continent <- barplot(table(Response$continent),
                        main = "Distribucion de DS por continentes",
                        ylim = c(0,3500)
)
text(x = bp_Continent, y= table(Response$continent), 
     label = paste("H/M = ", EtiquetaBarPlot) ,
     pos = 3, cex = 0.8, col = "red")

，然后显示我的 Menu 组件：

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Menu />
            <Switch>
                <Route path='/'>
                    <Home />
                </Route>
                <Route path='/about'>
                    <About />
                </Route>
            </Switch>
        </Router>
    </Provider>,
    document.getElementById('root')
)

问题是，当我单击相关链接时，我的function Menu() { return ( <ul className='menu'> <li className='menu-item'> <Link to='/'>Home</Link> </li> <li className='menu-item'> <Link to='/about'>About</Link> </li> </ul> ) } export default withRouter(Menu)组件未呈现，但URL显示在URL栏中。我不确定出什么问题了，我已经解决了与该主题相关的所有问题，他们的建议都没有帮助我。我正在使用About，但我认为这不是导致问题的原因。请帮忙！

Answer 1

如上所述，应将exact道具添加到呈现Home组件的路线中：

<Router>
    ...
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    ...
</Router>

这样做的原因是将Home组件的呈现限制为与"/"完全匹配。如果没有exact道具，则Home组件也会针对其他部分匹配的路线（即"/about"，将被视为部分匹配）呈现。

其他一些建议；您可以考虑通过执行以下操作，通过component组件上的Route道具来分配为路线渲染的组件：

    <Route exact path="/" component={Home} />

此外，您可以避免将Menu组件与withRouter包装在一起。

对于一个有效的示例，see this link-希望这些指针对您有所帮助！：）

Answer 2

像这样将exact添加到您的溃败中

<Route exact path='/'>
  <Home />
</Route>
<Route exact path='/about'>
  <About />
</Route>

Answer 3

像这样使用Router逻辑。

 <Provider store={store}>
        <Router>
            <Menu />
            <Switch>
                <Route path='/' exact component = {Home}/>
                <Route path='/about' exact component = {About}/>
            </Switch>
        </Router>
    </Provider>,

反应路由器未在路线上渲染组件

3 个答案: