如何从动态路线中走出来？

如何解决如何从动态路线中走出来？

我的动态路由设置如下：

import React,{ Component } from 'react'
import { browserRouter as Router,Switch,Route } from 'react-router-dom'
import DesktopHome from './DesktopHome'  
import WhoWeAre from './WhoWeAre'
import WhatWeDo from './WhatWeDo'
import Articles from './Articles'
import Article from './Article'
import NotFound from './NotFound'

...

<Router>
    <Switch>
        <Route exact path='/' render={(props) => <DesktopHome {...props} api={this.state.api} acctok={this.state.acctok} />} />
        <Route path='/who-we-are' render={(props) => <WhoWeAre {...props} api={this.state.api} acctok={this.state.acctok} />} />
        <Route path='/what-we-do' render={(props) => <WhatWeDo {...props} api={this.state.api} acctok={this.state.acctok} />} />
        <Route path='/articles/:id' component={(props) => <Article {...props} api={this.state.api} acctok={this.state.acctok} />} />
        <Route path='/articles' render={(props) => <Articles {...props} api={this.state.api} acctok={this.state.acctok} />} />    
        <Route path='/not-found' component={NotFound} />
        <Route component={NotFound} />
    </Switch>
</Router>

上面的代码是针对导航栏的，当我转到“文章/任何内容”时，它可以正常工作，但是只要该组件呈现，如果我尝试导航栏中的任何链接，我都会得到“文章/文章/任何内容-路线”

我想要得到的是'/ whatever-component-route'

编辑

添加了显示菜单的组件

import React,{ Component } from 'react'
import { Link } from 'react-router-dom'

class Menu extends Component {
    render() {
        return (
            <div className='menu'>
                <ul>
                    <Link to='./who-we-are'>
                        <li>
                            <div className='menuitem'>
                                <img src={require('./img/Menu Items-02.svg')} />
                            </div>
                            <h2>Who we are</h2>
                        </li>
                    </Link>
                    <Link to='./what-we-do'>
                        <li>
                            <div className='menuitem'>
                                <img src={require('./img/Menu Items-04.svg')} />
                            </div>
                            <h2>What we do</h2>
                        </li>
                    </Link>
                    <Link to='./articles'>
                        <li>
                            <div className='menuitem'>
                                <img src={require('./img/Menu Items-03.svg')} />
                            </div>
                            <h2>Articles</h2>
                        </li>
                    </Link>
                    <Link to='./past-projects'>
                        <li>
                            <div className='menuitem'>
                                <img src={require('./img/Menu Items-05.svg')} />
                            </div>
                            <h2>Past projects</h2>
                        </li>
                    </Link>
                    <Link to='./contact'>
                        <li>
                            <div className='menuitem'>
                                <img src={require('./img/Menu Items-01.svg')} />
                            </div>
                            <h2>Contact</h2>
                        </li>
                    </Link>
                </ul>
            </div>
        )
    }
}

export default Menu

解决方法

您的问题是您在路线前使用ComboBox。从所有链接中删除该点，它将从根开始。示例：

<preference name="android-minSdkVersion" value="22" />
<preference name="android-targetSdkVersion" value="28" />