[英]react router 4 nested components not working properly
I am switching from react-router 3.x to 4.x and I am not able to render nested routes. 我正在从react-router 3.x切换到4.x,但无法渲染嵌套路由。
I bootstrapped an application using create-react-app 我使用create-react-app引导了一个应用程序
index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import './index.css';
ReactDOM.render(<Routes />, document.getElementById('root'));
routes.js file
import React from 'react';
import _ from 'lodash';
import {
BrowserRouter as Router,
Route,
} from 'react-router-dom';
import { dojoRequire } from 'esri-loader';
import EsriLoader from 'esri-loader-react';
import App from './components/App';
import Home from './components/Home';
/**
* Helper component to wrap app
*/
class AppWrapper extends React.Component {
/**
* Util function to render the children
* Whenever a state change happens in react application, react will render the component again
* and we wish to pass the updated state to the children as props
*/
renderChildren() {
const {children} = this.props;
if (!children) {
return;
}
return React.Children.map(children, c => React.cloneElement(c, _.omit(this.props, 'children'), { }));
}
render() {
const child = this.renderChildren();
return (
<App {...this.props}>
{child}
</App>
);
}
}
/**
* Root Loader component to load esri api
*/
class LoaderComponent extends React.Component {
constructor(props) {
super(props);
this.state = { loaded: false };
}
/**
* Callback fired when arc GIS api is loaded
* Now load the requirejs modules using dojorequire
*/
esriReady() {
dojoRequire(['esri/Map', 'esri/views/MapView'], (Map, MapView) => {
this.setState({ Map, MapView, loaded: true });
});
}
render() {
const options = {
url: 'https://js.arcgis.com/4.3/',
};
return (
<div>
<EsriLoader options={options} ready={this.esriReady.bind(this)} />
<AppWrapper {...this.state}>
<Route exact path="/home" component={Home} />
</AppWrapper>
</div>
);
}
};
const Routes = (props) => (
<Router {...props}>
<Route exact path="/" component={LoaderComponent} />
</Router>
);
export default Routes;
App and home components are simple div tags that renders <div>Hello world App</div>
and <div>Hello world Home</div>
App和Home组件是简单的div标签,可呈现
<div>Hello world App</div>
和<div>Hello world Home</div>
The App
component renders perfectly, but when I navigate to http://localhost:3000/home
component I see an empty page. App
组件呈现完美,但是当我导航到http://localhost:3000/home
组件时,我看到一个空白页面。
What I would like to do is 我想做的是
When the user launched the app the user should be redirected to /home
and I would like to define two additional routes for App
Component 当用户启动应用程序时,应将用户重定向到
/home
,我想为App
组件定义两条附加路由
<Route exact path="/a" component={A} />
<Route exact path="/b" component={B} />
Currently I am not able to redirect to /home
on app load and not able to define nested routes for App
Component. 目前,我无法在应用程序加载时重定向到
/home
,也无法为App
组件定义嵌套路由。
NOTE: This above code was working fine for react-router version 3.x.
注意:以上代码对于react-router 3.x版本运行良好。 To redirect on page load I would use
IndexRedirect
.要在页面加载时重定向,我将使用
IndexRedirect
。
I already had a look at this and this question and I tried all possible solutions in those questions but none is working. 我已经看了一眼这个和这个问题,我想在这些问题的所有可能的解决方案,但没有工作。
I would like to have all the route handling in routes.js
file . 我想将所有的路由处理都放在
routes.js
文件中 。
You could achieve such routing with Switch
and Redirect
: 您可以使用
Switch
和Redirect
实现这样的路由:
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import {LoaderComponent, AppWrapper , Home, A, B} from './mycomponents';
const routes = (
<LoaderComponent>
<AppWrapper>
<Switch>
<Route exact path='/' render={() => <Redirect to='/home' />} />
<Route exact path='/home' component={Home} />
<Route exact path='/a' component={A} />
<Route exact path='/b' component={B} />
</Switch>
</AppWrapper>
</LoaderComponent>
);
export default routes;
And use the routes.js
file something like this: 并使用如下所示的
routes.js
文件:
import React from 'react';
import {render} from 'react-dom';
import {Router} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import routes from './routes';
const history = createHistory();
const App = () =>
<Router history={history}>
{routes}
</Router>;
render(<App />, document.getElementById('root'));
Hey I have implemented react-router-v4
, for a simple sample project. 嘿,我已经为一个简单的示例项目实现了
react-router-v4
。 here is the github link : How to Implement the react-router-v4 . 这是github链接: 如何实现react-router-v4 。 please go through it.
请通过它。 very simple.
很简单。
to run : clone it and hit npm install
. 运行:克隆它,然后按
npm install
。 hope this will help to you. 希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.