Question

所以基本上我是var result = db.SelectAll<Book>()和React的新手。还在学习。

有人可以向我解释为什么这有效吗

react-router

但是如果我从const App = () => ( <Fragment> <Route exact path="/" render={(props) => <Calendar {...props} />} /> <Route path="/:topics" render={(props) => <Topics {...props} />} /> <Route path="/:topics/:id" render={(props) => <Topic {...props} />} /> </Fragment> ); ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, ROOT);组件中删除嵌套路由，并将它们放置在App和Topics组件中，则路由将无法工作。

Topic

还有哪种方法更好？将所有class Topics extends Component { render() { const {match} = this.props; return ( <div className="topics"> <Route path={`${match.path}/:topics`} render={(props) => <Topics {...props} />} /> </div> ) } };放在Route组件中，或者将嵌套的App放在嵌套组件中？

Answer 1

我更喜欢写一个路由组件

export default class Routes extends Component {
render() {
return (
  <Switch>
    <Route path='your path' component={yourcomponent} />
  </Switch>
);
}
}

然后在应用程序组件中，我称它为孩子

  <Router history={history}>
    <Routes />
  </Router>

所以我可以从应用程序中以隔离的方式控制路线

Answer 2

我更喜欢使用react-router-dom。尤其是如果您出于浏览器目的而开发。

我通常在index.js中声明我的BrowserRouter（作为路由器），并将其包装在App组件周围，如下所示：

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
    <Router>
        <App />
    </Router>
    document.getElementById('root')
);

然后，我从App.js组件中的react-router-dom调用Route组件，并在文件的开头声明它，如下所示：

App.js

import { Route } from 'react-router-dom'
// IMPORT COMPONENTS

class App extends Component {
    render() {
        return (
            <div className="App">
                <Route exact path='/'           component={ HomePage }/>
                <Route exact path='/home'       component={ HomePage }/>
                <Route exact path='/discover'   component={ Discover }/>
                <Route exact path='/purchase'   component={ Purchase }/>
            </div>
        );
    }
}

完成此操作后，您可以使用Link组件从每个组件进行路由。还由react-router-dom提供。

示例组件（HomePage.js）

import { Link } from 'react-router-dom'

class HomePage extends Component {
    render() {
        return (
            <div className='HomePage'>
                <p>Press the button below to route to our Discovery page!</p>

                <Link to='/discover'>
                    <button>Press me</button>
                </Link>
            </div>
        );
    }
}

这只是一个基本示例。您可以在here或Github page上找到更多信息和选项。

嵌套路由在哪里放置在react-router中？

2 个答案: