问题描述
我的动态路由设置如下:
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" />