具有更深路径的反应路由器

Question

我正在尝试通过运行React Router获得一个示例。虽然只有一个级别http://www.example.com/one，但路由器可以工作，但是一旦我进入另一个级别http://www.example.com/one/two，路由器就无法工作。

在示例中，存在以下3条路线：

1. （作品）http://www.example.com/one
2. （失败）http://www.example.com/one/two
3. （失败）http://www.example.com/one/two/three

主应用类：

import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { One } from './One';
import { Two } from './Two';
import { Three } from './Three';

export class App2 extends React.Component<{}, {}> {
    public render() {
        return <BrowserRouter>
            <Switch>
                <Route path='/one' component={One} />
                <Route path='/one/two' component={Two} />
                <Route path='/one/two/three' component={Three} />
            </Switch>
        </BrowserRouter>;
    }
}

类命名为一：

import * as React from 'react';

export class One extends React.Component<{}, {}> {
    public render() {
        return <div>One</div>;
    }
}

类名为二：

import * as React from 'react';

export class Two extends React.Component<{}, {}> {
    public render() {
        return <div>Two</div>;
    }
}

类名为三：

import * as React from 'react';

export class Three extends React.Component<{}, {}> {
    public render() {
        return <div>Three</div>;
    }
}

我使用以下版本：

• 节点v13.7.0
• “ @ types / react”：“ 16.9.11”，
• “ @ types / react-dom”：“ 16.9.4”，
• “ @ types / react-router-dom”：“ 5.1.2”，
• “反应”：“ 16.11.0”，
• “ react-dom”：“ 16.11.0”，
• “ react-router-dom”：“ 5.1.2”，
• “打字稿”：“ 3.7.4”，

我尝试遵循示例here。

为什么只有1.路线有效？为什么其他路线2.和3.不起作用？

编辑1：

尝试使用精确也不行。结果与上面提到的相同：

import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { One } from './One';
import { Two } from './Two';
import { Three } from './Three';

export class App2 extends React.Component<{}, {}> {
    public render() {
        return <BrowserRouter>
            <Switch>
                <Route exact path='/one' component={One} />
                <Route exact path='/one/two' component={Two} />
                <Route exact path='/one/two/three' component={Three} />
            </Switch>
        </BrowserRouter>;
    }
}

编辑2：

尝试更改顺序也不起作用。结果与上面提到的相同：

import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { One } from './One';
import { Two } from './Two';
import { Three } from './Three';

export class App2 extends React.Component<{}, {}> {
    public render() {
        return <BrowserRouter>
            <Switch>
                <Route path='/one/two/three' component={Three} />
                <Route path='/one/two' component={Two} />
                <Route path='/one' component={One} />
            </Switch>
        </BrowserRouter>;
    }
}

Answer 1

简而言之：最具体的路线在前。只需取消您的订单即可。

与大多数路由器一样，每个路由器都按顺序检查是否匹配。

Answer 2

尝试在<Route/>中使用

精确

由于您的路径始终以/one开头，因此react router仅匹配该部分，如果您想更深入，则必须告诉他

exact（ly）您想要什么。

<Route exact path='/one' component={One} />
<Route exact path='/one/two' component={Two} />
<Route exact path='/one/two/three' component={Three} />

这里是docs的链接