React Router 的多個參數更改 url 但不是組件

Question

我想點擊鏈接按鈕后，它會將我重定向到另一個帶有完整 url 的頁面，例如 -> localhost:3001/companies/name/forms

但它不會重定向到任何地方，每次單擊時只更改 url .. like -> localhost:3001/companies/name/name/name/forms

<BrowserRouter>
...
<Switch>
  ...
  <Route path='/companies' exact component={CompanyList}></Route>
  <Route 
     path='/companies/:slug' 
     render={(props) => <CompanyDetails {...props} isAuthed={true} />}
   />
  <Route path='companies/:slug/forms' exact component={Forms}></Route>
<Switch>
...
</BrowserRouter>

並鏈接到 CompanyDetails 頁面（組件）的路徑

<Button type="button" className="btn btn-secondary">
      <Link to={`${this.props.match.params.slug}/forms`}>
         Create&nbsp; 
         <i className="fa fa-arrow-right"></i>
      </Link>
</Button>

有什么建議？

Answer 1

嘗試重新排列路線的順序並添加exact

同樣在您的代碼 path='companies/:slug/forms' 中缺少/

<Route exact path='/companies/:slug/forms' exact component={Forms}></Route>      
<Route 
  exact
  path='/companies/:slug' 
  render={(props) => <CompanyDetails {...props} isAuthed={true} />}
/>

如果以上不起作用，請嘗試在 CompanyDetails 頁面中添加/到您的鏈接

<Link to={`/${this.props.match.params.slug}/forms`}>