我自己的库中的组件内部的 React-Routing

Question

我创建了小型 ui 库，我想在某些组件中添加路由。例如，我们有类似

const SuperComponent = () => {
 return(
    <div>
      <nav>
        <ul>
          <li>
            <Link to="store/first">First</Link>
          </li>
          <li>
            <Link to="store/second">Second</Link>
          </li>
        </ul>
      </nav>
       <div>
        <Route path="store/first">
          <FirstPage />
        </Route>
        <Route path="store/second">
          <SecondPage />
        </Route>
      </div> 
    </div>
 )
}

后来我想像这样使用它

import SuperComponent from "react-super-component";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/store">
          <StoreApp />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

但现在我收到了不变的错误。有没有办法实现这样的逻辑？

Answer 1

您在寻找组件路由吗？

import React from "react";
import { Route } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const ComponentRoute= ({ component: Component, auth, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
        <Component {...props} />
      )
    }
  />
);


const mapStateToProps = (state) => ({
});

export default connect(mapStateToProps)(ComponentRoute);

然后在你的 switch 中使用它：

<ComponentRoute path="/" component={component} />