反应路由器仅在刷新后才能工作

时间:2019-04-26 17:12:28

标签: reactjs react-router

我对React Router有问题。

这是我的路由器:

<table class="mktoModule module_wrapper m_header mktoModule module_wrapper m_header" id="header2" style="border-spacing: 0; border-collapse: collapse;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0"> 
                      <tbody> 
                        <tr> 
                          <td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;padding-left: 0;background-position:top  center;background-size:auto;background-color:#9078d7;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;" valign="top" bgcolor="#9078d7" background="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png"> 
                            <center> 
                              <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:120px">
					<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png" color="#9078d7" />
					<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
					<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
					<![endif]--> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
                                <tbody> 
                                  <tr> 
                                    <td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;padding-left: 0;background-position:top  center;background-size:auto;background-color:#7C64C3;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;" valign="top" bgcolor="#7C64C3" background="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg"> 
                                      <center> 
                                        <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="width:600px;height:300px">
					<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg" color="#7C64C3" />
					<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
					<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]--> 
                                        <table> 
                                          <tbody> 
                                            <tr> 
                                              <td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 155px; font-size: 155px;" height="155">&nbsp;</td> 
                                            </tr> 
                                            <tr> 
                                              <td> 
                                                <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="500"> 
                                                  <tbody> 
                                                    <tr> 
                                                      <td class="primary-font title" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;text-align: left;font-family: Arial, sans-serif;font-weight: bold;font-size: 24px;border-collapse: collapse;line-height:26px;color:#ffffff;"> 
                                                        <div class="mktoText" id="heroText2">
                                                           Make money online through advertising 
                                                        </div> </td> 
                                                    </tr> 
                                                  </tbody> 
                                                </table></td> 
                                            </tr> 
                                            <tr> 
                                              <td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 35px; font-size: 35px;" height="35">&nbsp;</td> 
                                            </tr> 
                                          </tbody> 
                                        </table> 
                                        <!--[if gte mso 9]></div></div>
                    </v:textbox>
                    </v:rect>
                    <![endif]--> 
                                      </center> </td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                              <!--[if gte mso 9]></div></div>
                    </v:textbox>
                    </v:rect>
                    <![endif]--> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>

并链接到:

    <Router>
    <div>
      <Route exact path="/dashboard" component={projetList} />
      <Route path="/dashboard/:id" component={ 
        (props) => <Editor documentID={props.match.params.id} />
      } />
    </div>
    </Router>

问题描述:

当我单击我的元素时-浏览器尝试转到http://localhost:3000/dashboard 但该网站为空白。

当我刷新站点(F5按钮)时,组件就会加载。

1 个答案:

答案 0 :(得分:1)

也请查看以下链接:Routes are not navigating when React v15.5 setup with react-redux v5 is。并确保将其放置在正确的位置。例如,检查此内容:

<browserRouter>

https://pastebin.com/M9hU4Bg4