React HashRouter 不渲染其他路径,只渲染根组件'/'
React HashRouter not rendering other paths, only Rendering root component '/'
我的设置:
routes.js
const Router = () => (
<Switch>
<Route path="/" component={ Dashboard } />
<Route path="/somepath" component={ SomePath } />
</Switch>
);
index.js
<HashRouter>
<App />
</HashRouter>
app.js:
lass App extends Component {
render() {
return (
<div className="main-app">
<Header />
<div className="page__container">
<Router />
</div>
<Footer />
</div>
);
}
}
问题是,当我导航到 localhost/#/
根路径时,它正确呈现 routes.js
文件中提到的仪表板组件。但是当我导航到 localhost/#/somepath
时,它不会为某个路径渲染组件,它仍然在渲染 /
组件。
即使在 React Devtool
它显示 <Route path="/">
已加载,而不是 <Route path="/somepath">
您可能需要添加 exact
以匹配路径。将 exact
属性添加到 Route
<Route exact path="/somepath" component={ SomePath } />
我的设置:
routes.js
const Router = () => (
<Switch>
<Route path="/" component={ Dashboard } />
<Route path="/somepath" component={ SomePath } />
</Switch>
);
index.js
<HashRouter>
<App />
</HashRouter>
app.js:
lass App extends Component {
render() {
return (
<div className="main-app">
<Header />
<div className="page__container">
<Router />
</div>
<Footer />
</div>
);
}
}
问题是,当我导航到 localhost/#/
根路径时,它正确呈现 routes.js
文件中提到的仪表板组件。但是当我导航到 localhost/#/somepath
时,它不会为某个路径渲染组件,它仍然在渲染 /
组件。
即使在 React Devtool
它显示 <Route path="/">
已加载,而不是 <Route path="/somepath">
您可能需要添加 exact
以匹配路径。将 exact
属性添加到 Route
<Route exact path="/somepath" component={ SomePath } />