이번에는 React-router v4를 사용하는 단계와 React-router v4를 사용할 때 주의사항에 대해 자세히 설명하겠습니다. 실제 사례를 살펴보겠습니다.
아마도 반응 라우터를 배우는 가장 좋은 방법은 반응 라우터-dom v4를 사용하여 다중 페이지 반응 애플리케이션을 작성하는 것입니다. 이 반응 애플리케이션에는 로그인, 등록, 홈페이지, 연락처 및 기타 페이지가 포함됩니다. 하지만 먼저 React Router v4의 개념과 v3과의 차이점을 살펴보겠습니다.
v4는 React 라우터를 다시 작성한 것이므로 v3와 많은 차이점이 있습니다. 주요 내용은 다음과 같습니다.
반응 라우터 v4에서는 라우팅이 더 이상 중앙 집중화되지 않습니다. 이는 애플리케이션 레이아웃 및 UI의 일부가 됩니다.
브라우저가 사용하는 라우터는 react-router-dom에 있습니다. 따라서 브라우저에서 사용할 때에는 react-router-dom만 import하면 됩니다. react-router-dom里。所以，浏览器里使用的时候只需要import react-router-dom就可以。
新的概念BrowerRouter和HashRouter。他们各自服务于不同的情景下。详见下文。
不在使用{props.children}来处理嵌套的路由。
v4的路由默认不再排他，会有多个匹配。而v3是默认排他的，只会有一个匹配被使用。
react-router-dom是react-router中用于浏览器的。react-router被分为一下几部分：
react-router是浏览器和原生应用的通用部分。
react-router-dom是用于浏览器的。
react-router-native是用于原生应用的。
react-router是核心部分。react-router-dom提供了浏览器使用需要的定制组件。react-router-native则专门提供了在原生移动应用中需要用到的部分。所以，如果在本例中实现浏览器开发就只需要安装react-router-dom。
如上所说，我们使用react开发web应用，所以只需要安装react-router-dom。
npm install react-router-dom --save
BrowserRouter，这是对Router接口的实现。使得页面和浏览器的history保持一致。如：window.location。
HashRouter，和上面的一样，只是使用的是url的hash部分，比如：window.location.hash。
MemoryRouter，
NativeRouter，处理react native内的路由。
<a href="http://www.php.cn/wiki/188.html" target="_blank">Static</a>Router，处理静态路由，和v3一样。
在react-router的各种router中，<BrowserRouter>和<HashRouter>是可以在浏览器中使用的。如果你使用的是一个非静态的站点、要处理各种不同的url那么你就需要使用BrowserRouter。相反的如果你的server只处理静态的url，那么就使用HashRouter。
<Route>组件是react router v4里最有用的组件。背后的使用哲学也很简单，无论何时你需要在匹配某个路径的时候绘制一个组件，那么就可以使用Route组件。
Route组件可以使用如下的属性：
path属性，字符串类型，它的值就是用来匹配url的。
component属性，它的值是一个组件。在path
BrowerRouter 및 HashRouter. 그들은 각각 다른 상황에 처해 있습니다. 자세한 내용은 아래를 참조하세요.
{props.children}을 사용하여 중첩된 경로를 처리하지 않습니다. 🎜🎜v4 라우팅은 더 이상 기본적으로 배타적이지 않으며 여러 일치 항목이 있습니다. v3은 기본적으로 배타적이며 일치 항목이 하나만 사용됩니다. 🎜🎜react-router-dom은 브라우저용 반응 라우터에서 사용됩니다. react-router는 다음 부분으로 나뉩니다. 🎜🎜🎜🎜react-router는 브라우저와 기본 애플리케이션의 공통 부분입니다. 🎜🎜🎜🎜react-router-dom은 브라우저용입니다. 🎜🎜🎜🎜react-router-native는 기본 애플리케이션용입니다. 🎜🎜🎜React-router vs React-router-dom vs React-router-native🎜🎜react-router가 핵심 부분입니다. react-router-dom은 브라우저 사용에 필요한 맞춤 구성요소를 제공합니다. react-router-native는 네이티브 모바일 애플리케이션에 필요한 부분을 구체적으로 제공합니다. 따라서 이 예시에서 브라우저 개발을 구현한다면 react-router-dom만 설치하면 됩니다. 🎜🎜Installation🎜🎜위에서 언급한 것처럼 우리는 웹 애플리케이션 개발에 React를 사용하기 때문에 react-router-dom만 설치하면 됩니다. 🎜<Route exact path="/" component={HomePage} />Router 인터페이스의 구현인 React-router🎜🎜🎜🎜BrowserRouter를 이해하고 사용하세요. 페이지와 브라우저 기록을 일관되게 만드세요. 예: window.location. 🎜🎜🎜🎜HashRouter는 window.location.hash와 같이 URL의 해시 부분을 사용한다는 점을 제외하면 위와 동일합니다. 🎜🎜🎜🎜MemoryRouter, 🎜🎜🎜🎜NativeRouter는 반응 네이티브에서 라우팅을 처리합니다. 🎜🎜🎜🎜<a href="http://www.php.cn/wiki/188.html" target="_blank">Static🎜Router</a>, v3와 동일하게 정적 라우팅을 처리합니다. . 🎜🎜<BrowserRouter> 및 BrowserRouter를 사용해야 합니다. 반대로 서버가 정적 URL만 처리하는 경우 HashRouter를 사용하세요. 🎜🎜Route 이해 및 사용🎜🎜<Route> 구성요소는 React Router v4에서 가장 유용한 구성요소입니다. 그 뒤에 숨겨진 사용 철학도 매우 간단합니다. 특정 경로를 일치시킬 때 구성 요소를 그려야 할 때마다 Route 구성 요소를 사용할 수 있습니다. 🎜🎜Route 구성 요소는 다음 속성을 사용할 수 있습니다: 🎜🎜🎜🎜path 속성, String 🎜 유형, 해당 값은 URL과 일치하는 데 사용됩니다. 🎜🎜🎜🎜컴포넌트 속성, 그 값은 컴포넌트입니다. 이 구성요소는 경로가 성공적으로 일치된 후에 그려집니다. 🎜🎜🎜🎜정확한 속성, 이 속성은 이 경로가 독점 일치하는지 여부를 나타내는 데 사용됩니다. 🎜🎜🎜🎜strict 속성, 이 속성은 경로가 슬래시로 끝나는 경로와만 일치하도록 지정합니다. 🎜还有其他的一些属性，可以用来代替component属性。
render属性，一个返回React组件的方法。传说中的rencer-prop就是从这里来的。
children属性，返回一个React组件的方法。只不过这个总是会绘制，即使没有匹配的路径的时候。
多数的时候是用component属性就可以满足。但是，某些情况下你不得不使用render或children属性。
match
location
history
如：
使用组件：
<Route exact path="/" component={HomePage} />使用render属性实现内联绘制：
<Route path="/" render={()=><p>HomePage</p>} />来看哥更复杂的：
const FadingRoute = ({ component, ...rest }) => (
<Route {...rest} render={(props) => (
<FadeIn>
<componnet {...props} />
</FadeIn>
)} />
)
<FadingRoute path="/cool" component={Something} />使用children：
<ul>
<ListItemLink to="/somewhere" />
<LinkItemLink to="/somewhere-else" />
</ul>
const ListItemLink = ({to, ...rest}) => (
<Route path={to} children={({math}) => (
<li className={match ? 'active' : ''}>
<Link to={to} {...rest} />
</li>
)} />
)更多关于react-router v4如何匹配路径的内容，请移步这里。
通常情况下，我们都会在路径里添加参数。这样方便在不同的组件之间传递一些必要的数据。那么我们如何才能获取到这些传递的参数，并传递给组件中呢？我们只需要在路径的最后加上/:param。如：
<Route path="/:param1" component={HomePage} />
const HomePage = ({match}) => (
<p>
<h1> parameter => {match.params.param1}
</p>
);一旦有路径可以匹配成功，那么就会穿件一个拥有如下属性的对象，并传入绘制的组件里：
url: 匹配的url。
path：就是path。
isExact：如果path和当前的widnow.location的path部分完全相同的话。
params：在URL里包含的参数。
Link是react router v4特有的一个组件。是用来代替上一版的anchor link。使用Link可以在React应用的不同页面之间跳转。与unclor会重新加载整个页面不同，Link只会重新加载页面里和当前url可以匹配的部分。
Link组件需要用到to属性，这个属性的值就是react router要跳转到的地址。如：
import { Link } from 'react-router-dom';
const Nav = () => (
<Link to '/'>Home</Link>
);当被点击的时候，会跳转到路径：/。
to属性的值可以是一个字符串，也可以是一个location（pathname, hash, state和search）对象。比如：
<Link to{{
pathname: '/me',
search: '?sort=asc',
hash: '#hash',
state: { fromHome: true }
}} />Link也可以使用replace属性，如果点击的话，那么history里的当前领会被replace。
NavLink是Link的一个子类，在Link组件的基础上增加了绘制组件的样式，比如：
<NavLink to="/me" activeStyle={{SomeStyle}} activeClassName="selected">
My Profile
</NavLink>现在我们用react router dom来实现第一个demo。
首先，引入必要的组件。比如：Route和BrowserRouter。
import { BrowserRouter, Route } from 'react-router-dom';接下来，我们创建一些组件和一些Html标签。同时我们用react router v4里的Link和NavLink组件。
const BaseLayout = () => (
<p className="base">
<header>
<p>React Router v4 Browser Example</p>
<nav>
<ul>
<li><Link ="/">Home</Link></li>
<li><Link ="/about">About</Link></li>
<li><Link ="/me">Profile</Link></li>
<li><Link ="/login">Login</Link></li>
<li><Link ="/register">Register</Link></li>
<li><Link ="/contact">Contact</Link></li>
</ul>
</nav>
</header>
<p className="container">
<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/contact" component={ContactPage} />
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
<Route path="/me" component={ProfilePage} />
</p>
<footer>
React Router v4 Browser Example (c) 2017
</footer>
</p>
);然后我们来创建需要的组件：
const HomePage = () => <p>This is a Home Page</p> const LoginPage = () => <p>This is a Login Page</p> const RegisterPage = () => <p>This is a Register Page</p> const ProfilePage = () => <p>This is a Profile Page</p> const AboutPage = () => <p>This is a About Page</p> const ContactPage = () => <p>This is a Contact Page</p>
最后，写App组件。
const App = () => (
<BrowserRouter>
<BaseLayout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'));如你所见，react router v4的组件还非常的易用的。
在上例中，我们在HomePage组件的路由里使用了属性exact。
<Route path="/" exact component={HomePage} />这是因为v4中的路由默认都是非排他的，这一点和v3的实现思路截然不同。如果没有exact属性，HomePage组件和其他的组件就会同事绘制在页面上。
如，当用户点了登录连接以后，"/"和"/login"都满足匹配条件，对应的登录组件和Home组件就会同时出现在界面上。但是，这不是我们期待的结果，所以我们要给"/"path加上exact属性。
现在我们来看看非排他的路由有什么优点。假如我们有一个子菜单组件需要显示在profile页面出现的时候也出现。我们可以简单的修改BasicLayout来实现。
const BaseLayout = () => (
<p className="base">
<header>
<p>React Router v4 Browser Example</p>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li>
<Link to="/me">Profile</Link>
<Route path="/me" component={ProfileMenu} />
</li>
{/*略*/}
</ul>
</nav>
</header>
</p>
);这样我们就会看到对应于"/me"路径的组件都绘制出来了。这就是非排他路由的好处。
排他路由是react router v3的默认实现。只有第一个匹配的路由对应的组件会被绘制。这一点也可以用react router v4的Switch组件来实现。在Switch组件中，只有第一个匹配的路由<Route>或者<Redirect>会被绘制：
import { Switch, Route } from 'react-router';
<Route exact path="/" component={HomePage} />
react router v4中，提供了一个history对象。这个对象包含了多个api，可以用来操作浏览器历史等。
你也可以在React应用里使用history对象的方法：
history.push("/my-path")
history.replace("/my-path")用另外的方法可以写成：
<Link to="/my-path" /> <Redirect to="my-path" />
无论何时你要重定向到另外一个地址的时候，都可以使用Redirect组件：
<Redirect to {{
pathname: '/register',
search: '?utm=something',
state: { referrer: someplage.com }
}}>或者，更为简单的：
<Redirect to="register" />
react router v4让开发react应用变得更加的简单。让react应用内的页面跳转更加简单。你只需要声明一个BrowserRouter或者HashRouter，然后在它的内部放上一系列的Route组件，这些主键只要包含path和component属性。无论何时有了匹配的路由，那么它就会进行非排他的绘制（所有匹配的路由都会绘制）。你也可以把Route放在Switch组件里来实现排他的绘制（只有第一个匹配的路由会被绘制）。你可以在路径中传递参数，match对象会保留这些参数。最后，所有在web中使用的路由组件都包含在react-router-dom中。只需要引入react-router-dom就可以使用。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 React-router v4 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
