Question

<BrowserRouter>
    <section className='section'>
    <Navbar />
    <Switch>
      <Route exact path='/' component={Articles} />
      <Route path= '/football' component={Articles} />
      <Route path= '/cooking' component={Articles} />
      <Route path= '/coding' component={Articles} />
      <Route path= '/article/:id' component={ArticleById} />
      <Route path= '/articles/comments' component={ArticleComments}/>
      <Route component={NoMatch} />
      </Switch>
    </section>
</BrowserRouter>

因此当我从组件加载的路径中取出'/：id'或'/ comments'时，路由'/ article /：id'和'/ articles / comments'无法加载任何内容。

Answer 1

使用

时在React Router中

<Switch>它将呈现与该路径匹配的FIRST组件。

当你有：id？

时，它是否呈现你的NoMatch组件

对于/ comments，您应该使用子路由，例如

<Route path='/articles'>
    <Route path='/comments' component={ArticleComments} />
</Route>

Answer 2

问题是您的项目不使用服务器端路由。我在您的父组件（文章）中放置了一个组件，然后单击该链接（设置为文章/ 1

e.g。

<Link to="/article/1">CLICK HERE</Link>

它运作得很好。但是，请在URL栏中输入

http://localhost:9000/article/1

不起作用......这就是为什么......

如果您没有设置服务器端路由，那么当您进行基于浏览器的请求时（这是您通过网址栏执行的操作），它将发送对内容的请求。 URL中的位置。您获得404 NOT FOUND错误的原因是因为您希望webpack-dev-server知道当您键入/ articles / 1时它应该为组件提供服务，但据它可以告诉您＆＃ 39; ve实际上请求了一个名为articles的文件夹，其中包含一个名为1的文件。

因此，您需要一台服务器来处理浏览器对位置的请求。

您需要一个静态路由器来将请求网址与路由文件中的路径相匹配，而路径文件又会返回＆＃34;返回＆＃34;该组件到浏览器。

Answer 3

正如@Joshua Underwood所说，事实是 webpack-dev-server 试图无处获取你的脚本。但我不认为这是基于其他路线完美运作这一事实的正确答案。所以，也就是说问题不是由于 webpack-dev-server 或反应而是由于你的index.html本身。

我敢打赌你已经在historyApiFallback: true设置了webpack.config.js，并且还指出了bundle.js类似bundle.js或.\bundle.js的内容，您应将其设为\bundle.js。否则，尽管服务器正确处理了回退，但您的index.html文件不知道找到了哪个路径，并尝试根据错误的路径级别来锚定脚本。

如果我的路径中有超过1个正斜杠，为什么我的反应开关路由器不起作用

3 个答案: