使用 react-router 在应用程序中使用 react-router 反应组件

Question

我正在开发一个带有自己的 react-router-dom 的 react 组件，以便能够处理像 /post 和 /post/123 这样的路径。

我需要将此组件打包为 npm 模块，以便它可以嵌入到另一个具有自己的 react-router-dom 的 React 应用程序中。

托管应用：

<Router>
  <Switch>
    <Route path="/posts" exact={true}>
      <Blog />
    </Route>
  </Switch>
</Router

在博客组件中：

<Router basename="/posts">
   <Switch>
     <Route path="/">
       <p>Display all posts</p>
     </Route>
     <Route path="/post/:id">
       <p>Display details for post with id</p>
     </Route>
   </Switch>
</Router>

当我访问/posts 路径时，我收到Display all posts 消息。但是，当我访问 /post/123 路径时，我看不到 Display details for post with id 消息。

如何让内部路由器路径与外部路由器一起使用？

Answer 1

您缺少确切的关键字

 <Router basename="/posts">
       <Switch>
         <Route exact path="/">
           <p>Display all posts</p>
         </Route>
         <Route exact path="/post/:id">
           <p>Display details for post with id</p>
         </Route>
       </Switch>
    </Router>

Answer 2

这是完整的解决方案：尝试这样做：

如果您在“路由器”中使用 basename，请这样做

const BlogPage = () =>{
    return(
        <Router basename='/posts'>
            <Switch>
                <Route path='/posts' exact>
                    <p>Display All Posts </p>
                </Route>
                <Route path='/:id' exact>
                    <p>Display Post with Id </p>
                </Route>
            </Switch>
        </Router>
    )
}

或者，如果您在不使用 basename 的情况下使用路由器，那么它应该是这样的：

const BlogPage = () =>{
    return(
        <Router>
            <Switch>
                <Route path='/posts' exact>
                    <p>Display All Posts </p>
                </Route>
                <Route path='/posts/:id/' exact>
                    <p>Display Post with Id </p>
                </Route>
            </Switch>
        </Router>
    )
}

看看两者的区别

Answer 3

对于遇到此问题的任何人 - 我通过将 history 传递给两个路由器来解决它：

主应用：

import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/posts">
          <Blog />
        </Route>
      </Switch>
    </Router>
  );
}

博客组件：

import { BrowserRouter as Router, Route } from 'react-router-dom';

const Blog = () => {
  return (
    <Router basename="/posts">
      <Switch>
        <Route path="/" exact>
          <p>Display all posts</p>
        </Route>
        <Route path="/post/:id" exact>
          <p>Display details for post with id</p>
        </Route>
      </Switch>
    </Router>
  )
}