reactjs - react-router v3 根路由渲染 2 个组件。如何使用 react-router v5 做到这一点？

Question

反应路由器 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 相同的行为？

标签： reactjs

Answer 1

没有必要使用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;