[英]React Router v4 nested routes props.children
我正在更新我的通用react redux應用程序以使用react router v4。 我在主布局路線下有嵌套路線。 以前我使用{props.children}來顯示子路徑的內容,但這不再起作用了。 這在V4中如何工作?
<Provider store={store} key="provider">
<div>
<Route component={Layout} />
<Switch>
<Route path="/" component={HomePage} />
<Route component={Error404} />
</Switch>
</div>
</Provider>
要么
<Provider store={store} key="provider">
<Layout>
<Route path="/" component={HomePage} />
<Route component={Error404} />
</Layout>
</Provider>
這就是我的Layout文件的外觀
const Layout = props => (
<div className="o-container">
<Header />
<main>
{props.children}
</main>
<Footer />
</div>
);
我已經把<Provider>
拿出來了,因為它屬於react-redux
而你不需要它作為使用react-router
進行路由的基礎(無論如何你可以輕松添加它用它封裝結構)。
在React Router V4中,什么是Router
已重命名為BrowserRouter
並從包react-router-dom
導入。 因此,對於嵌套路徑,您需要將其作為<Layout>
子項插入。
index.js
import { Switch, Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Layout from './Layout';
...
const Root = () => (
<Layout>
<BrowserRouter>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/other" component={OtherComponent} />
<Route component={Error404} />
</Switch>
</BrowserRouter>
</Layout>
);
ReactDOM.render(
<Root/>,
document.getElementById('root')
);
Layout.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';
const Layout = props => ({
render() {
return (
<div className="o-container">
<Header />
<main>{props.children}</main>
<Footer />
</div>
);
}
});
export default Layout;
記住這只適用於網絡。 本機實現不同。
我上傳了一個基於Create React App 的小項目 ,我在V4中展示了嵌套路由的實現。
我以為我必須分享這個。 如果您在Header
組件中使用了Link
組件。 上面的答案是行不通的。 您必須再次將BrowserRouter
作為父級才能支持Link
。 像這樣:
<BrowserRouter>
<Layout>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/other" component={OtherComponent} />
<Route component={Error404} />
</Switch>
</Layout>
</BrowserRouter>
我會使用這個結構,沒有props.children:
const Main = () => (
<main>
<Switch>
<Route exact path="/" component={HomePage} />
<Route component={Error404} />
</Switch>
</main>
)
const Layout = () => (
<div>
<Header />
<Main />
<Footer />
</div>
)
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<Layout />
</BrowserRouter>
</Provider>
), document.getElementById('root'))
添加到@Dez答案
使用Redux支持完成本機/核心實現
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, Switch } from 'react-router';
import createMemoryHistory from 'history/createMemoryHistory';
const history = createMemoryHistory();
import App from './components/App';
import Home from './components/Home';
import Login from './components/Login';
import store from './store';
ReactDOM.render((
<Provider store={ store }>
<Router history={history}>
<App>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</Switch>
</App>
</Router>
</Provider>
), document.getElementById('root'));
App.js
import Header from './Header';
import Home from './Home';
import React from 'react';
import {connect} from 'react-redux';
const mapStateToProps = state => ({appName: state.appName});
class App extends React.Component {
render() {
return (
<div >
<Header appName={this.props.appName} /> {/*common header*/}
{this.props.children}
</div>
);
}
}
export default connect(mapStateToProps, () => ({}))(App);
請通過此博客閱讀。 https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
沒有更多
<IndexRoute>
允許組件路由到v3中頂級路徑上的某個組件:
// in src/MyApp.js
const MyApp = () => (
<Router history={history}>
<Route path="/" component={Layout}>
<IndexRoute component={Dashboard} />
<Route path="/foo" component={Foo} />
<Route path="/bar" component={Bar} />
</Route>
</Router>
)
此組件在v4中不再存在。 要替換它,請使用,精確和路由排序的組合(最后放置索引路徑):
// in src/MyApp.js
const MyApp = () => {
<Router history={history}>
<Route path="/" component={Layout} />
</Router>
}
// in src/Layout.js
const Layout = () => (
<div className="body">
<h1 className="title">MyApp</h1>
<div className="content">
<Switch>
<Route exact path="/foo" component={Foo} />
<Route exact path="/bar" component={Bar} />
<Route exact path="/" component={Dashboard} />
</Switch>
</div>
</div>
);
如果使用Redux,則不使用Switch元素
AppRouter.js
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
const AppRouter = () => (
<Layout>
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
</Layout>
)
export default AppRouter;
Layout.js
const Layout = props => ({
render() {
return (
<div className="container">
<Header />
<main>{props.children}</main>
<Footer />
</div>
);
}
});
export default Layout;
提供者放置在渲染功能中
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import AppRouter from './AppRouter';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<AppRouter />
</Provider>
, document.getElementById('app'));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.