大家好,我是一名刚开始使用React Router的初学者。
我有两个问题。<Link to="/page">和之间有什么区别<a href="page">?两者都向完全相同的获取请求,/page但是当我使用时收到错误,<a href="page">但是<Link to="/page">当我嵌套路线时使用时却可以工作。我不知道当两者都渲染为完全相同的网址时,我不知道会有什么区别
<Link to="/page">
<a href="page">
/page
其次是React Router v4文档中的奇怪箭头功能
const About = () => ( <div> <h2>About</h2> </div> )
我知道() => {}这些是ES6中的新功能,但是我无法在括号中找到任何内容,而不是括号。这些是什么?
() => {}
编辑
我的index.js类(我拥有所有导入)
render(( <Router> <div> <Route component={App}/> </div> </Router> ), document.getElementById('root') );
我的App.js类
class App extends Component { render() { return ( <div className="container"> <header> <span className="icn-logo"><i className="material-icons">code</i></span> <ul className="main-nav"> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/teachers">Teachers</Link></li> <li><Link to="/courses">Courses</Link></li> </ul> </header> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/teachers" component={Teachers}/> <Route path="/courses" component={Course}/> </div> ); } } export default App;
我得到的错误。 Cannot GET /about在浏览器上尝试移至时localhost:8080/about。但是,当我单击about按钮时,它会转到完全相同的网址/about并呈现完美
Cannot GET /about
localhost:8080/about
about
/about
解决您的问题可能为时已晚,您可能已经解决了。但是,这是我的看法:
第一:
<Link to="/page">和之间有什么区别<a href="page">
Link
react-router
/blah
<a href='page' />
/blah/page
/page/:id
<a />
我用来解决此问题的一种解决方法是将state属性传递给link这样<Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>。然后,可以像下面这样在目标组件的(say <Page />)中检查它componentWillReceiveProps:
state
<Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>
<Page />
componentWillReceiveProps
componentWillReceiveProps(nextProps){ if (nextProps.location.state === 'desiredState') { // do stuffs } }
第二个问题:
React Router v4文档中的奇怪箭头功能…我在普通括号中没有找到任何内容,而不是括号。这些是什么?
箭头功能;@Dennis和@Jaromanda X再次解决了该问题。但是,我要添加三点:
() => blah
{}
=>
blah
return
() => (blah)
() => { return blah }
() => { blah }
{ blah: blah }
() => ({ blah: blah })
() => ({ blah })
() => { return { blah: blah } }
希望能帮助到你。