我正在学习一门课程,作者使用onInstall(e)
第3版编写了一些用于路由的代码。
react-router
在学习本课程(我正在使用<Router history={browserHistory} >
<Route path="/" component={Main}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:postId" component={Single}>
</Route>
</Router>
版本4的课程)时,我知道现在router
不存在。我用谷歌搜索了替代方案,发现<IndexRoute>
是替代方案。但是我不知道如何使用exact
来满足此要求。作者希望exact
组件始终位于DOM上,并且基于url,仅子组件应该更改(即Main
或Single
)。
我尝试了以下代码,这当然是错误的代码:
PhotoGrid
我的组件是:
<BrowserRouter>
<Switch>
<Route path="/" component={Main} />
<Route exact path="/" component={PhotoGrid} />
<Route path="/veiw/:postId" component={Single} />
</Switch>
</BrowserRouter>
答案 0 :(得分:1)
Switch
组件将仅呈现匹配的第一个Route
。
您可以将Main
组件用作常规组件,并将Switch
用作children
。
<BrowserRouter>
<Main>
<Switch>
<Route exact path="/" component={PhotoGrid} />
<Route path="/view/:postId" component={Single} />
</Switch>
</Main>
</BrowserRouter>
答案 1 :(得分:0)
我知道这是一个老问题,但是我遵循相同的路线,因此我决定更新所有库,基本上我必须像这样重新构建应用程序:
reduxtagram.js:
import React from 'react';
import {render} from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux';
import store from './store';
// import css
import css from './styles/style.styl';
// import react router deps
const router = (
<Provider store={store}>
<App/>
</Provider>
)
render(router , document.getElementById('root'));
main.js:
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import PhotoGrid from './PhotoGrid';
import Single from './Single';
import {Router, Route} from 'react-router-dom';
import {history} from '../store';
export default class Main extends Component {
render() {
return (
<div>
<Router history={history}>
<Route
path="/"
render={(routeProps) => (
<h1>
<Link to='/'>Reduxstagram </Link>
</h1>
)}/>
<Route
path="/grid"
render={(routeProps) => (
<PhotoGrid {...routeProps} {...this.props} />
)}/>
<Route
path="/grid/view/:postID"
render={(routeProps) => (
<Single {...routeProps} {...this.props} />
)}/>
</Router>
</div>
)
}
}