<Route path="/about" component={About}/>
react-routing-demo-v4
├──.gitignore
├──package.json
├──public
│├──favicon.ico
│├──index.html
│└──manifest.json
├──README.md
├──src
│├──App.css
│├──App.js
│├──App.test.js
│├──index.css
│├──index.js
│├──logo.svg
│└──registerServiceWorker.js
└──yarn.lock
npm install --save react-router-dom
<router>
<route exact=""path="/"component="{Home}/">
<route path="/category"component="{Category}/">
<route path="/login"component="{Login}/">
<route path="/products"component="{Products}/"/>
</route>
</route>
</route>
</router>
/* Import statements */
import React from'react';
import ReactDOM from'react-dom';
/* App is the entry point to the React code.*/
import App from'./App';
/* import BrowserRouter from 'react-router-dom' */
import{BrowserRouter}from'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>
,document.getElementById('root'));
history是一个让你轻松管理所有Java运行的会话记录的Java库。history提供了简洁的API,让你可以管理history堆栈,跳转,确认跳转,以及保持会话之间的状态。 – 来自React 培训文档
/* Import statements */
import React,{Component}from'react';
import{Link,Route,Switch}from'react-router-dom';
/* Home component */
constHome= ()=> (
<div>
<h2>Home</h2>
</div>
)
/* Category component */
constCategory= ()=> (
<div>
<h2>Category</h2>
</div>
)
/* Products component */
constProducts= ()=> (
<div>
<h2>Products</h2>
</div>
)
/* App component */
classApp extendsReact.Component{
render(){
return(
<div>
<nav className="navbar navbar-light">
<ul className="nav navbar-nav">
/* Link components are used for linking to other views */
<li><Linkto="/">Homes</Link></li>
<li><Linkto="/category">Category</Link></li>
<li><Linkto="/products">Products</Link></li>
</ul>
</nav>
/* Route components are rendered if the path prop matches the current URL */
<Route path="/"component={Home}/>
<Route path="/category"component={Category}/>
<Route path="/products"component={Products}/>
</div>
)
}
}
<Route exact={true} path="/" component={Home}/>
<Route exact path="/"component={Home}/>
<Route path="/products"component={Products}/>
<Route path="/category"component={Category}/>
<Route path="/:id"render= {()=> (<p> Iwant thistext toshow up forall routes other than'/','/products'and'/category'</p>)}/>
import React,{Component}from'react';
import{Link,Route,Switch}from'react-router-dom';
import Category from'./Category';
classAppextendsComponent{
render(){
return(
<div>
<nav className="navbar navbar-light">
<ul className="nav navbar-nav">
<li><Linkto="/">Homes</Link></li>
<li><Linkto="/category">Category</Link></li>
<li><Linkto="/products">Products</Link></li>
</ul>
</nav>
<Switch>
<Route exact path="/"component={Home}/>
<Route path="/category"component={Category}/>
<Route path="/products"component={Products}/>
</Switch>
</div>
);
}
}
export defaultApp;
/* Code for Home and Products component omitted for brevity */
import React from'react';
import{Link,Route}from'react-router-dom';
constCategory= ({match})=> {
return(<div> <ul>
<li><Linkto={`${match.url}/shoes`}>Shoes</Link></li>
<li><Linkto={`${match.url}/boots`}>Boots</Link></li>
<li><Linkto={`${match.url}/footwear`}>Footwear</Link></li>
</ul>
<Route path={`${match.path}/:name`}render= {({match})=>(<div> <h3> {match.params.name}</h3></div>)}/>
</div>)
}
export defaultCategory;
<Route path={`${match.path}/:name`}
render= {({match})=>(<div> <h3> {match.params.name}</h3></div>)}/>
{
name: 'running-shoes'
}
constproductData= [
{
id: 1,
name: 'NIKE Liteforce Blue Sneakers',
deion: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.',
status: 'Available'
},
{
id: 2,
name: 'Stylised Flip Flops and Slippers',
deion: 'Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.',
status: 'Out of Stock'
},
{
id: 3,
name: 'ADIDAS Adispree Running Shoes',
deion: 'Maecenas condimentum porttitor auctor. Maecenas viverra fringilla felis, eu pretium.',
status: 'Available'
},
{
id: 4,
name: 'ADIDAS Mid Sneakers',
deion: 'Ut hendrerit venenatis lacus, vel lacinia ipsum fermentum vel. Cras.',
status: 'Out of Stock'
},
];
/* Import statements have been left out for code brevity */
constProducts= ({match})=> {
constproductsData= [
{
id: 1,
name: 'NIKE Liteforce Blue Sneakers',
deion: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.',
status: 'Available'
},
//Rest of the data has been left out for code brevity
];
/* Create an arrayof`<li>`items foreachproduct
varlinkList= productsData.map((product)=> {
return(
<li>
<Linkto={`${match.url}/${product.id}`}>
{product.name}
</Link>
</li>
)
})
return(
<div>
<div>
<div>
<h3> Products</h3>
<ul> {linkList}</ul>
</div>
</div>
<Route path={`${match.url}/:productId`}
render={(props)=> <Product data= {productsData}{...props}/>}/>
<Route exact path={match.url}
render={()=> (
<div>Please selectaproduct.</div>
)}
/>
</div>
)
}
<Route path={`${match.url}/:productId`}
render={(props)=> <Product data= {productsData}{...props}/>}/>
/* Import statements have been left out for code brevity */
constProduct= ({match,data})=> {
varproduct= data.find(p=> p.id== match.params.productId);
varproductData;
if(product)
productData= <div>
<h3> {product.name}</h3>
<p>{product.deion}</p>
<hr/>
<h4>{product.status}</h4> </div>;
else
productData= <h2> Sorry.Product doesnt exist</h2>;
return(
<div>
<div>
{productData}
</div>
</div>
)
}
<Redirect to={{pathname: '/login', state: {from: props.location}}}
/* Add the PrivateRoute component to the existing Routes */
<Switch>
<Route exact path="/"component={Home}data={data}/>
<Route path="/category"component={Category}/>
<Route path="/login"component={Login}/>
<PrivateRoute authed={fakeAuth.isAuthenticated}path='/products'component= {Products}/>
</Switch>
/* PrivateRoute component definition */
constPrivateRoute= ({component: Component,authed,...rest})=> {
return(
<Route
{...rest}
render={(props)=> authed=== true
?<Component{...props}/>
: <Redirect to={{pathname: '/login',state: {from: props.location}}}/>}/>
)
}
import React from'react';
import{Redirect}from'react-router-dom';
classLogin extendsReact.Component{
constructor(){
super();
this.state= {
redirectToReferrer: false
}
// binding 'this'
this.login= this.login.bind(this);
}
login(){
fakeAuth.authenticate(()=> {
this.setState({redirectToReferrer: true})
})
}
render(){
const{from}= this.props.location.state|| {from: {pathname: '/'}}
const{redirectToReferrer}= this.state;
if(redirectToReferrer){
return(
<Redirect to={from}/>
)
}
return(
<div>
<p>Youmustlogintoviewthepageat{from.pathname}</p>
<button onClick={this.login}>Log in</button>
</div>
)
}
}
/* A fake authentication function */
export constfakeAuth= {
isAuthenticated: false,
authenticate(cb){
this.isAuthenticated= true
setTimeout(cb,100)
},
}
const { from } = this.props.location.state || { from: { pathname: '/' } }
英文:Manjunath M 译文:众成翻译
原文:http://zcfy.cc/article/react-r ... 8.htm
本文为 @ 21CTO 创作并授权 21CTO 发布,未经许可,请勿转载。
内容授权事宜请您联系 webmaster@21cto.com或关注 21CTO 公众号。
该文观点仅代表作者本人,21CTO 平台仅提供信息存储空间服务。