react-router v3根路由呈現2個組件。 如何在react-router v5中使用它？

Question

react-router v3版本

<Router history={browserHistory}>
  <Route path='/' component={Common}>
    <IndexRoute component={Home} ></IndexRoute>
    <Route path='list(/:id)' component={List}></Route>
    <Redirect from='detail' to='list/123'></Redirect>
  </Route>
</Router>

這是我與react-router v5一起使用的代碼，但是Home組件無法渲染

<BrowserRouter>
    <Redirect path='/' exact component={Common}/>
    <Route path='/list(/:id)' component={List}/>
    <Redirect from='/detail' to='/list/123'/>
    <Redirect component={Home}></Redirect>
</BrowserRouter>

我應該怎么做才能獲得與react-router v3相同的行為？

Answer 1

我不太確定您要談論的版本，因為我對React生態系統也很陌生。 但是，當我從頭開始嘗試時，嘗試以以下方式定義我的React路由器。 也許對您有幫助。 我希望您嘗試在可能已定義devServer的地方使用Webpack：{historyApiFallback：true}

<BrowseRouter>
 <Switch>
 <Route path="/" exact={true} component={component1} />
 <Route path="/create" component={component2} />
 <Route path="/edit/:id" component={component3} />
 <Route component={pagenotfound} />
</Switch>
</BrowseRouter>

問候帕萬·巴尼迪帕蒂

Answer 2

無需使用Redirect 。 只需使用Route組件。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/list/123">List</Link>
          </li>
        </ul>
        <hr />
        <Route exact path="/" component={Home} />
        <Route path="/list(/:id)" component={List} />
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function List() {
  return (
    <div>
      <h2>List</h2>
    </div>
  );
}



export default BasicExample;