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不呈现任何内容（甚至＆＃34;标题＆＃34;部分），并且控制台显示没有错误。我究竟做错了什么？我使用的是反应路由器的v4

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

Answer 1

问题是，当您尝试访问path="/path1"时，会先触发/path1/path2。并且因为您使用<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由于配置错误而没有很好地处理这些事情。

我有SPA（devServer { historyApiFallback: ... }）的api后备设置，它适用于像/path1这样的平面路径，但是对于像/path1/path2/*...这样的更深层路径来说，我们需要

<base href="/" />

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

在gh issue

中查看详情

在react-router，＆＃34; / path1＆＃34;有效，但＆＃34; / path1 / path2＆＃34;没有任何表现

3 个答案: