Javascript 在React路由器&x27；s的最新版本，如何在主页中嵌套路线/&引用；

如何在主页中嵌套路由“/”

假设您有一个2页的站点，主页只有一个标题和段落，而ABOUT页面又有两个嵌套路由，这是ABOUT页面

关于

import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";
/* Inner Pages */
import Technology from "./innerpages/Technology";
import Business from "./innerpages/Business";


const About = props => {
  return (
    <div className="container">
        <div className="tab-navs">
            <Link to={`${props.match.url}/business`}>Business</Link>
            <Link to={`${props.match.url}/economics`}>Economics</Link>
        </div>
          <Switch>
            <Route
              exact
              path={`${props.match.path}/business`}
              render={() => <Business />}
            />
            <Route
              path={`${props.match.path}/economics`}
              render={() => <Economics />}
            />
          </Switch>
    </div>
  );
};

export default About;

从“React”导入React；
从“react router dom”导入{Link，Route，Switch，Redirect}；
/*内页*/
从“/innerpages/Technology”导入技术；
从“/innerpages/Business”导入业务；
const About=props=>{
返回(
商业
经济学
}
/>
}
/>
);
};
导出默认值约为；

主页

import React from "react";

const Home = props => {
  return (
    <div className="container">
        <h1>Home</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    </div>
  );
};

export default Home;

从“React”导入React；
const Home=props=>{
返回(
家
Lorem ipsum，dolor sit amet Concertetur Adipising Elite

);
};
导出默认主页；

这是index.js

索引

import React,{Component} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Logo from "./components/Logo";
import Navigation from "./components/Navigation";

/* Pages */
import Home from "./pages/Home";
import About from "./pages/About";

import "./stylesheet/main.scss";

class App extends Component {
  constructor(props){
     super(props);
  }
 render(){
  return (
    <Router>
      <div className="App">
        <header>
          <Logo />
          <Navigation />
        </header>
        <main>
          <Switch>
            <Route path="/" exact render={props => <Home />} />
            <Route path="/about" component={About} />
          </Switch>
        </main>
      </div>
    </Router>
  );
}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/components/Logo”导入徽标；
从“/components/Navigation”导入导航；
/*页数*/
从“/pages/Home”导入主页；
从“/pages/About”导入关于；
导入“/stylesheet/main.scss”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
} />
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

现在这很好，但是如果url为“/”的主页有两条嵌套路由呢？我试着切换他们的内容，但它不起作用

如果主页必须有嵌套的路由，您要做的是从其路径中删除确切的关键字，并在Switch组件中重新排序路由

  <Switch>
        <Route path="/about" component={About} />
        <Route path="/services" component={Services} />
        <Route path="/" render={props => <Home {...props}/>} />
  </Switch>

} />

我试过了，但我得到了这个错误：“TypeError无法读取未定义的属性'url'”我是否应该删除

${props.match.url}/business

和

${props.match.url}/economics

内部链接？如果使用Route呈现About组件，我看不出它不会收到匹配属性的任何原因。你能提供更多的细节吗？这是我做的一个测试，我按照你的建议删除了props.match.url，我只是用典型的“/urlhere”替换了它。我现在唯一的问题是如何自动加载或呈现主页中的第一个嵌套路由？好的，很抱歉，不能更早看到这个，使用渲染道具渲染主视图时，请确保将道具传递给主视图组件

}/>

是的，我这样做了，但是如何在不单击的情况下自动渲染主视图中的嵌套管线？我正在主页内构建某种选项卡导航