Reactjs 反应路线嵌套在主页上

我能够让路由在页面级别工作，如果不是在主页上，嵌套路由也可以正常工作。 e、 g

然而，我无法在主页上嵌套路由，结构如下所示

/..........PageA(homepage)
   /pageA1.....PageA1 (nested)
   /PageA2.....PageA2 (nested)
/PageB ... PageB

这是代码，代码可以在上面播放

然后嵌套的页面就可以正常工作了。但与此同时，它破坏了PageA（主页），PageB。 有人能告诉我哪里出了错吗？感谢您的光临

精确的仅关键字呈现/url的页面A

单击pagea1时，现在url为/pagea1

所以我们既看不到pagea也看不到pageb

当您删除exact时，现在每个url都以/呈现pagea开始，在这种情况下pageb将不起作用，/pagea1url也会停止工作，因为您提到

path={match.path + "/pagea1"}

其中math.path为/，因此//pagea1将呈现pagea1

您可以创建/pagea并将/重定向到/pagea

注意：您必须在PageA链接中进行重大更改

之后，代码将如下所示

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

const PageB1 = () => <>"Page B 1"</>;
const PageB2 = () => <>"Page B 2"</>;
const PageB3 = () => <>"Page B 3"</>;

const PageA = ({ match }) => {
  return (
    <>
      <ul>
        <li>
          <Link to="/pagea/pagea1">Page A 1</Link>
        </li>
        <li>
          <Link to="/pagea/pagea2">Page A 2</Link>
        </li>
        <li>
          <Link to="/pagea/pagea3">Page A 3</Link>
        </li>
      </ul>
      <hr />
      <Route exact path={match.path + "/pagea1"} component={PageB1} />
      <Route exact path={match.path + "/pagea2"} component={PageB2} />
      <Route exact path={match.path + "/pagea3"} component={PageB3} />
    </>
  );
};
const PageB = () => " Page B";

export default function App() {
  return (
    <div className="App">
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Page A</Link>
            </li>
            <li>
              <Link to="/pageb">Page B</Link>
            </li>
          </ul>
          <hr />
          <Switch>
            <Route path="/pagea" component={PageA} />
            <Route path="/pageb" component={PageB} />
            <Redirect to="/pagea" />
          </Switch>
        </div>
      </Router>
    </div>
  );
}

从“react Router dom”导入{BrowserRouter as Router，Redirect，Route，Switch，Link}；
常量PageB1=（）=>“第b1页”；
常量PageB2=（）=>“第B2页”；
常量PageB3=（）=>“第B3页”；
常量PageA=（{match}）=>{
返回(


A页1


A页2


第A3页



);
};
常量PageB=（）=>“第B页”；
导出默认函数App（）{
返回(


A页


B页



);
}

PS:希望我回答了你的问题，如果不让我知道。

在这里

精确的仅关键字呈现/url的页面A

单击pagea1时，现在url为/pagea1

所以我们既看不到pagea也看不到pageb

当您删除exact时，现在每个url都以/呈现pagea开始，在这种情况下pageb将不起作用，/pagea1url也会停止工作，因为您提到

path={match.path + "/pagea1"}

其中math.path为/，因此//pagea1将呈现pagea1

您可以创建/pagea并将/重定向到/pagea

注意：您必须在PageA链接中进行重大更改

之后，代码将如下所示

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

const PageB1 = () => <>"Page B 1"</>;
const PageB2 = () => <>"Page B 2"</>;
const PageB3 = () => <>"Page B 3"</>;

const PageA = ({ match }) => {
  return (
    <>
      <ul>
        <li>
          <Link to="/pagea/pagea1">Page A 1</Link>
        </li>
        <li>
          <Link to="/pagea/pagea2">Page A 2</Link>
        </li>
        <li>
          <Link to="/pagea/pagea3">Page A 3</Link>
        </li>
      </ul>
      <hr />
      <Route exact path={match.path + "/pagea1"} component={PageB1} />
      <Route exact path={match.path + "/pagea2"} component={PageB2} />
      <Route exact path={match.path + "/pagea3"} component={PageB3} />
    </>
  );
};
const PageB = () => " Page B";

export default function App() {
  return (
    <div className="App">
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Page A</Link>
            </li>
            <li>
              <Link to="/pageb">Page B</Link>
            </li>
          </ul>
          <hr />
          <Switch>
            <Route path="/pagea" component={PageA} />
            <Route path="/pageb" component={PageB} />
            <Redirect to="/pagea" />
          </Switch>
        </div>
      </Router>
    </div>
  );
}

从“react Router dom”导入{BrowserRouter as Router，Redirect，Route，Switch，Link}；
常量PageB1=（）=>“第b1页”；
常量PageB2=（）=>“第B2页”；
常量PageB3=（）=>“第B3页”；
常量PageA=（{match}）=>{
返回(


A页1


A页2


第A3页



);
};
常量PageB=（）=>“第B页”；
导出默认函数App（）{
返回(


A页


B页



);
}

---

PS:如果不让我知道，希望我回答了您的问题。

因为您传递给组件的道具路径具有值“/”，并且您正在嵌套路由路径中添加该值，即//pagea1。这就是它不起作用的原因

我在这里观察到的另一件事是，总是建议在最后添加通用路由，在您的代码中，首先添加通用“/”路由

请遵循以下代码：-

 const PageB1 = () => <>"Page B 1"</>;
 const PageB2 = () => <>"Page B 2"</>;
 const PageB3 = () => <>"Page B 3"</>;
 const PageA = ({ match }) => {
 return (
   <>
    <ul>
     <li>
       <Link to="/pagea1">Page A 1</Link>
     </li>
     <li>
       <Link to="/pagea2">Page A 2</Link>
     </li>
     <li>
       <Link to="/pagea3">Page A 3</Link>
     </li>
   </ul>
   <hr />
     /* match.path  have  "/" so you can remove it here 
      * because you are adding / in pagea1 */ 
   <Route exact path={ "/pagea1"} component={PageB1} /> 
     
   /* this syntax will work too because i have omit / from pageea2 value */
   <Route exact path={match.path + "pagea2"} component={PageB2} /> 
   <Route exact path={match.path + "pagea3"} component={PageB3} />
 </>
 );
};

const PageB = () => " Page A";

export default function App() {
  return (
    <div className="App">
     <Router>
      <div>
       <ul>
        <li>
          <Link to="/">Page A</Link>
        </li>
        <li>
          <Link to="/pageb">Page B</Link>
        </li>
       </ul>
       <hr />
       <Switch>
         <Route path="/pageb" component={PageB} /> // keep specific paths 
                                                    //route on top to generic 
                                                      one 
         <Route path="/" component={PageA} /> // and in case of generic 
                                                    you don't need exact 
       </Switch>
     </div>
   </Router>
 </div>
);}

constpageb1=（）=>“第b1页”；
常量PageB2=（）=>“第B2页”；
常量PageB3=（）=>“第B3页”；
常量PageA=（{match}）=>{
返回(


A页1


A页2


第A3页



/*match.path具有“/”以便您可以在此处删除它
*因为您正在添加/在pagea1*/
/*这个语法也会起作用，因为我已经忽略了pagea2的值/from*/
);
};
常量PageB=（）=>“第A页”；
导出默认函数App（）{
返回(


A页


B页



//保持特定路径
//从上到下的路线
一
//如果是通用的
你不需要确切的答案
);}

---

希望它能起作用。

因为您传递给组件的props路径具有值“/”，并且您正在嵌套路由路径中添加该值，即：//pagea1。这就是它不起作用的原因

我在这里观察到的另一件事是，总是建议在最后添加通用路由，在您的代码中，首先添加通用“/”路由

请遵循以下代码：-

 const PageB1 = () => <>"Page B 1"</>;
 const PageB2 = () => <>"Page B 2"</>;
 const PageB3 = () => <>"Page B 3"</>;
 const PageA = ({ match }) => {
 return (
   <>
    <ul>
     <li>
       <Link to="/pagea1">Page A 1</Link>
     </li>
     <li>
       <Link to="/pagea2">Page A 2</Link>
     </li>
     <li>
       <Link to="/pagea3">Page A 3</Link>
     </li>
   </ul>
   <hr />
     /* match.path  have  "/" so you can remove it here 
      * because you are adding / in pagea1 */ 
   <Route exact path={ "/pagea1"} component={PageB1} /> 
     
   /* this syntax will work too because i have omit / from pageea2 value */
   <Route exact path={match.path + "pagea2"} component={PageB2} /> 
   <Route exact path={match.path + "pagea3"} component={PageB3} />
 </>
 );
};

const PageB = () => " Page A";

export default function App() {
  return (
    <div className="App">
     <Router>
      <div>
       <ul>
        <li>
          <Link to="/">Page A</Link>
        </li>
        <li>
          <Link to="/pageb">Page B</Link>
        </li>
       </ul>
       <hr />
       <Switch>
         <Route path="/pageb" component={PageB} /> // keep specific paths 
                                                    //route on top to generic 
                                                      one 
         <Route path="/" component={PageA} /> // and in case of generic 
                                                    you don't need exact 
       </Switch>
     </div>
   </Router>
 </div>
);}

constpageb1=（）=>“第b1页”；
常量PageB2=（）=>“第B2页”；
常量PageB3=（）=>“第B3页”；
常量PageA=（{match}）=>{
返回(


A页1