[英]Nested Routes in React not rendering correctly with react-router v4
I have my root component main switch like this 我有这样的根组件主开关
<Provider store={createStoreWithMiddleware(reducers)}> <HashRouter history={history} > <Switch> <Route exact path="/login" name="Login Page" component={Login}/> <Route exact path="/register" name="Register Page" component={Register}/> <Route exact path="/404" name="Page 404" component={Page404}/> <Route exact path="/500" name="Page 500" component={Page500}/> <Route path="/Console" name="Console" component={Console}/> <Route path="/" name="Home" component={Full}/> </Switch> </HashRouter> </Provider>
And inside the Console
component I have another switch defined like this 在
Console
组件中,我定义了另一个这样的开关
<main className="container"> <div className=""> <Switch> <Route path="/Create" name="Create Park" component={CreateNew} /> <Route path="/" name="Console" component={HomePage} /> </Switch> </div> </main>
When I visit /Console
HomePage
component shows properly. 当我访问
/Console
HomePage
组件显示正确。
But the when I visit /Console/Create
CreateNew
component would not show but instead shows HomePage
component. 但是当我访问
/Console/Create
CreateNew
组件时,将不会显示而是显示HomePage
组件。
What I am doing wrong here ? 我在这里做错了什么? What should I do to show
CreateNew
component at /Console/Create
我应该怎么做才能在
/Console/Create
显示CreateNew
组件
The nested Routes must have an absolute path specified, You can use match.path
as a prefix to the nested Route to provide the path as an absolute one 嵌套路由必须指定绝对路径,您可以将
match.path
用作嵌套路由的前缀,以将路径作为绝对路径提供
<main className="container">
<div className="">
<Switch>
<Route path={`${match.path}/Create`} name="Create Park" component={CreateNew} />
<Route path={`${match.path}/`} name="Console" component={HomePage} />
</Switch>
</div>
</main>
or else specify the complete path 否则指定完整路径
<main className="container">
<div className="">
<Switch>
<Route path="/Console/Create" name="Create Park" component={CreateNew} />
<Route path="/Console/" name="Console" component={HomePage} />
</Switch>
</div>
</main>
According to React-Router match
documentation: 根据React-Router
match
文档:
A match object contains information about how a matched the URL.
匹配对象包含有关如何匹配URL的信息。 match objects contain the following properties:
匹配对象包含以下属性:
params - (object)
Key/value pairs parsed from the URL corresponding to the dynamic segments of the pathparams - (object)
从URL解析的键/值对,对应于路径的动态段
isExact - (boolean)
true if the entire URL was matched (no trailing characters)isExact - (boolean)
如果整个URL都匹配,则为true(无尾字符)
path - (string)
The path pattern used to match.path - (string)
用于匹配的路径模式。 Useful for building nested s用于构建嵌套的s
url - (string)
The matched portion of the URL.url - (string)
URL的匹配部分。 Useful for building nested s用于构建嵌套的s
the Console component is refactored as following: 控制台组件的重构如下:
<main className="container">
<div className="">
<Switch>
<Route exact path="/" name="Console" component={HomePage} />
<Route exact path="/Create" name="Create Park" component={CreateNew} />
</Switch>
</div>
</main>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.