在 react-router 中，“/path1”有效，但“/path1/path2”不呈现任何内容

Question

我吓坏了，这是要点

import * as React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom';

class App extends React.Component{ 
  ...
  render(){
    return (
        <BrowserRouter>
          <div>
            <div>Header</div>

            <Switch>
              <Route path="/path1" render={()=>(<div>path1</div>)} />
              <Route path="/path1/path2" render={()=>(<div>path1/path2</div>)} />
            </Switch>
          </div>
        </BrowserRouter>
    );
  }
}

当我访问 /path1 时，它呈现正确，但 path1/path2 什么也不呈现（甚至 "Header" 部分），并且控制台没有显示任何错误。我究竟做错了什么？我正在使用 react-router

的 v4

更新我尝试在第一条路线上添加 exact，但情况没有改变。

Answer 1

问题是当您尝试访问 /path1/path2 时，path="/path1" 首先被触发。因为您使用的是 <Switch>，第二个组件不会呈现。在你的情况下，尝试使用 exact path，如下所示：

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom';

class App extends React.Component {
  render(){
    return (
        <BrowserRouter>
          <div>
            <div>Header</div>

            <Switch>
              <Route exact path="/path1" render={()=>(<div>path1</div>)} />
              <Route path="/path1/path2" render={()=>(<div>path1/path2</div>)} />
            </Switch>
          </div>
        </BrowserRouter>
    );
  }
}

export default App;

另外，我不知道那是不是打错了，但每条路线都应该是一个 Route 组件，而不是 Router.

这应该可以正常工作！

Answer 2

尝试更改路由所在的顺序。

<Switch>
  <Route path="/path1/path2" render={()=>(<div>path1/path2</div>)} />
  <Route exact path="/path1" render={()=>(<div>path1</div>)} /></Switch>

Answer 3

感谢Brunno和Davi，原来是webpack-dev-server及其配置的问题。发生的事情是，当我测试路由时，我很难重新加载浏览器，而 webpack-dev-server 由于配置错误而无法很好地处理这些事情。

我有 api SPA 的回退设置 (devServer { historyApiFallback: ... })，它适用于像 /path1 这样的平坦路径，但对于像 /path1/path2/*... 这样的更深层次的路径，我们需要

<base href="/" />

在 index.html 的头部部分（或服务器呈现的任何文件）

在gh issue

中查看更多内容

在 react-router 中，“/path1”有效，但“/path1/path2”不呈现任何内容

in react-router, "/path1" works, but "/path1/path2" renders nothing

react-router

react-router-v4