我有以下App组件。
class App extends React.Component {
constructor() {
super();
this.state = {}
}
// various methods that interact with state defined here
render() {
const Main = () => (
<div className="main-wrapper">
<ListPicker/>
<ListPane/>
</div>
);
const Search = () => (
<div className="search-wrapper">
<ul className="search-results">
<li>Search Results</li>
</ul>
</div>
);
return (
<div className="app-wrapper">
<Title/>
<SearchBar listResults={this.listResults}/>
<Route exact path="/" component={Main}/>
<Route path="/search" component={Search}/>
</div>
)
}
}
呈现在index.js：
import React from 'react';
import { render } from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import App from './components/App';
const Root = () => {
return (
<Router>
<div>
<Route exact path="/" component={App}/>
</div>
</Router>
)
};
render(<Root/>, document.getElementById('root'));
朝下方App你可以看到，我想有任何的Main部件或Search组件的下方渲染<Title/>和<SearchBar/>基于路径/或/search。据我从 React-Router 文档中得知，我正在做他们示例应用程序中显示的内容，但我无法使其正常工作。按照目前的设置Main使得在罚款/，但导航到时候/search没事内呈现<Root/>。我也尝试将这两个包裹<Routes/>在 a 中，<Switch/>但得到了相同的结果。我错过了什么吗？
您exact Route在 index.js 中放入了一个。所以路由/search找不到路。所以改为：
const Root = () => {
return (
<Router>
<div>
<Route path="/" component={App}/>
</div>
</Router>
)
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句