我有一个集成的 React 应用程序(它集成到现有的 Flask 应用程序中),并且 React 应用程序的入口不在网站的根目录中。触发 React 应用程序的第一个 URL 是“/active-items”。
但是,其他路线不一定延伸该路径。有些路由是“/active-items/item/”,而有些则完全不同,例如“/item-selection”。
考虑到这一点,我正在尝试设置我的 React Router 为每个路由提供一个基本组件。基本上,任何触发的路由都应该以“App”组件作为基本组件,并且在 App 组件内我有“{props.children}”。
我已经尝试了几次迭代路线的外观,但没有成功。
我的最新迭代是这样的:
<Router>
<div>
<Route path='/' component={App}>
<Route path='active-items' component={ActiveItems} />
</Route>
</div>
</Router>
应用程序已呈现,但 ActiveItems 未呈现。有什么想法我应该如何解决这个问题吗?
编辑:我正在使用react-router-dom v4.0.0
最佳答案
原始答案
React Router 第 4 版有许多重大更改。您不能再以这种方式使用嵌套路由。查看使用新版本的 React Router 的嵌套路由示例。
const Header = () => (
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
)
const Footer = () => (
<footer>
Copyrights
</footer>
)
const Layout = props => (
<div className="layout">
<div className="layout__container">
<Header />{ props.children }
<Footer />
</div>
</div>
)
const Home = () => <Layout>This is the home page.</Layout>
const About = () => <Layout>This is the about page.</Layout>
<Router>
<div>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
希望有帮助。
更新答案(11 月 16 日)
这就是我实际上正在做的事情。
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import React from 'react'
import About from './components/views/About'
import Home from './components/views/Home'
import Layout from './components/views/Layout'
const Routes = () => (
<BrowserRouter>
<Layout>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/about' component={About} />
</Switch>
</Layout>
</BrowserRouter>
)
export default Routes
关于reactjs - 具有自定义根和基本组件的 React Router,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42933167/