react 및 react-dom, react-router 및 react-router-dom은 그렇지 않습니다. 둘 다 인용해? react 和 react-dom ，那么 react-router 和 react-router-dom 是不是两个都要引用呢？ 注意，前方高能，入门第一坑就在这里 。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然，如果搭配 redux ，你还需要使用 react-router-redux 。
<p>主要组件简介
<p>在4.0之前版本的 API 中， <Router> 组件的 children 只能是 React Router 提供的各种组件，如 <Route>、<IndexRoute>、<Redirect> 等。而在 React Router 4 中，你可以将各种组件及标签放进 <Router> 组件中，他的角色也更像是 Redux 中的 <Provider> 。**不同的是 <Provider> 是用来保持与 store 的更新，而 <Router> 是用来保持与 location 的同步。**示例如下：
// 示例1
<Router>
<p>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于</Link></li>
<li><Link to="/topics">主题列表</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</p>
</Router><BrowserRouter> ：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；<HashRouter> ：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；<MemoryRouter> ：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；<NativeRouter> ：为使用React Native提供路由支持；<StaticRouter> ：从不会改变地址；<Router> 组件下只允许存在一个子元素，如存在多个则会报错。<p>反面典型在这里：<Router>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于</Link></li>
<li><Link to="/topics">主题列表</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</Router><p>주의하세요, 앞에는 높은 에너지가 있고 시작하기 위한 첫 번째 구덩이는 바로 여기입니다. 그 중 하나만 참조하면 됩니다. 차이점은 후자가 전자보다 <Link><BrowserRouter>와 같은 DOM 클래스 구성 요소를 더 많이 가지고 있다는 것입니다. 따라서 react-router-dom 패키지만 참조하면 됩니다. 물론 redux와 짝을 이루면 react-router-redux도 사용해야 합니다. 🎜🎜🎜주요 구성 요소 소개🎜🎜🎜4.0 이전 API 버전에서 <Router> 구성 요소의 하위 구성 요소는 <Route>와 같이 React Router에서 제공하는 다양한 구성 요소만 될 수 있습니다. ; , <IndexRoute>, <Redirect> 등 React Router 4에서는 다양한 구성 요소와 태그를 <Router> 구성 요소에 넣을 수 있으며 그 역할은 Redux 코드>의 <Provider>와 비슷합니다. . **차이점은 <Provider>는 매장 업데이트를 유지하는 데 사용되고 <Router>는 위치 동기화를 유지하는 데 사용된다는 것입니다. **예는 다음과 같습니다. 🎜🎜
<Router>
<p>
<Route exact path="/" component={Home}/>
<Route path="/news" component={NewsFeed}/>
</p>
</Router>
// 如果应用的地址是/,那么相应的UI会类似这个样子：
<p>
<Home/>
</p>
// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<p>
<NewsFeed/>
</p><BrowserRouter>: HTML5에서 제공하는 기록 API를 사용하여 UI와 URL을 동기화합니다. 🎜🎜🎜🎜<HashRouter>: UI와 URL의 동기화를 유지하기 위한 URL(예: window.location.hash) 🎜🎜🎜🎜<MemoryRouter>: "URL" 기록을 메모리에 저장할 수 있습니다(읽거나 읽지 않고). 주소 표시줄 쓰기) ;🎜🎜🎜🎜<NativeRouter> : React Native 사용을 위한 라우팅 지원 제공 🎜🎜🎜🎜<StaticRouter> : 주소를 변경하지 않습니다. ; 🎜🎜🎜 🎜팁: 이전 라우터와 달리 <Router> 구성 요소에는 하위 요소가 하나만 허용됩니다. 보고되었습니다. 🎜🎜부정적인 예는 다음과 같습니다. 🎜🎜
// 行内渲染示例
<Route path="/home" render={() => <p>Home</p>}/>
// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
<FadeIn>
<Component {...props}/>
</FadeIn>
)}/>
)
<FadingRoute path="/cool" component={Something}/><p> 아빠의 보호 없이 다음과 같은 예외 메시지를 보고합니다. 🎜
<Router>
<p>
<Route exact path="/" component={Home}/>
<Route path="/news" component={NewsFeed}/>
</p>
</Router>
// 如果应用的地址是/,那么相应的UI会类似这个样子：
<p>
<Home/>
</p>
// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<p>
<NewsFeed/>
</p><Route> 组件有如下属性：| 路径 | location.pathname | exact | 是否匹配 |
|---|---|---|---|
| /one | /one/two | true | 否 |
| /one | /one/two | false | 是 |
| 路径 | location.pathname | strict | 是否匹配 |
|---|---|---|---|
| /one/ | /one | true | 否 |
| /one/ | /one/ | true | 是 |
| /one/ | /one/two | true | 是 |
同时，新版的路由为 <Route> 提供了三种渲染内容的方法：
<Route component> ：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；<Route render> ：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；<Route children> ：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；<Route render> 的渲染方式：// 行内渲染示例
<Route path="/home" render={() => <p>Home</p>}/>
// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
<FadeIn>
<Component {...props}/>
</FadeIn>
)}/>
)
<FadingRoute path="/cool" component={Something}/><Route component> 的优先级要比 <Route render> 高，所以不要在同一个 <Route> 中同时使用这两个属性。<p>和之前版本没太大区别，重点看下组件属性：// Link组件示例
// to为string
<Link to="/about">关于</Link>
// to为obj
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
// replace
<Link to="/courses" replace /><NavLink> 是 <Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：// activeClassName选中时样式为selected
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
// 选中时样式为activeStyle的样式设置
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs</NavLink>
// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink><Route> 或者 <Redirect> 。那么它与使用一堆route又有什么区别呢？<p><Switch> 的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的 <Route> 都会被渲染。思考下面的代码：<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>/about ，那么 <About> , <User> , 还有 <NoMatch> 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 <Route> 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>/about ， <Switch> 将开始寻找匹配的 <Route> 。 <Route path="/about"/> 将被匹配， <Switch> 将停止寻找匹配并渲染 <About> 。同样，如果我们处于 /michael ， <User> 将被渲染。
<p>上面是我整理给大家的，希望今后会对大家有帮助。
<p>相关文章：
<p>AJAX封装类使用指南위 내용은 React Router v4 시작 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
