我的任务是在tensor([])
上打开Main products
,并在/
上打开Misc products
,并使用相同的布局(页眉和页脚),然后打开/misc
About
上没有布局
/about
并且如果在import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom'
const About = () => "About";
const Error = () => "404";
class AdvertsList extends React.Component {
render() {
let {match} = this.props;
return (
<div className="container">
<header>Header</header>
<main>
<nav>
<Link to="/">Main products</Link> #
<Link to="/misc">Misc products</Link> #
<Link to="/about">About</Link>
</nav>
<div className="content">
<Switch>
<Route path="/" exact={true} render={() => "Main products"}/>
<Route path="/misc" render={() => "Misc products"}/>
<Redirect to="/" />
</Switch>
</div>
</main>
<footer>Footer</footer>
</div>
)
};
}
class App extends React.Component {
render() {
return (
<Router>
<Switch>
<Route path="/" exact={true} component={AdvertsList}/>
<Route path="/about" component={About}/>
<Route path="*" component={Error}/>
</Switch>
</Router>
);
}
}
render(<App/>, document.querySelector("#app"));
上打开了Main products
并且/
链接也可以正常工作,那么尽管进行了所有/about
设置,/misc
链接仍然无法运行,{{1 }}返回,我无法访问其他产品。
答案 0 :(得分:2)
我认为不是:
<Route path="/" exact={true} component={AdvertsList} />
您想要的:
<Route path="/" component={AdvertsList} />
此外,如果您只是将道具设置为true
,则可以写出道具名称,以供将来参考。
例如:
<Thing disabled={true} />
等效于:
<Thing disabled />
答案 1 :(得分:2)
由于确切的属性,您的第一个路由仅解析为根,而不会解析任何其他路由。因此/misc
会自动跳到您的错误路线。
您可以将misc
路由添加为App
组件上的另一个Route组件。
或通过
<Route path="/(|misc)" exact={true} component={AdvertsList} />
这会将/
和/misc
都解析为AdvertsList,其确切属性仍解析为true。您可以通过添加诸如|misc|settings|varia