Question

我是ReactJS和ReactRouter4的新手，我的路线无法正常工作，任何建议示例都会有所帮助。

下面是我的代码，

＆＃13;

//main.js
class Main extends Component{

  render(){
    return (
        <div className="row navmargin">
          <div className="col-md-10">
              <Route exact path="/" component={Home}/>

				<Route  path="/products" component={ProductsMain}/>

          </div>
          <div className="col-md-2">
            <p>other content</p>
          </div>
        </div>
    )
  }
}

class ProductsTab extends Component{
  render(){
    return (
          <h2>
                Products
            </h2>
            <ul className="nav nav-tabs">
              <li className="nav-item">
                <Link  to={`${this.props.match.url}/all`} className ="nav-link">All</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link"  to={`${this.props.match.url}/brandwise`}>BrandWise</Link>
              </li>
            </ul>
            <div className="tab-content" id="pills-tabContent">
                <Route exact path={this.props.match.url} component={AllProducts}/>
                <Route path={`${this.props.match.url}/all`} component={AllProducts}/>
                <Route path={`${this.props.match.url}/brandwise`} component={BrandwiseProducts}/>

            </div>
    )
  
  }

}

//productsmain.js
class ProductsMain extends Component{

  render(){
    return(
            <div>
            <Switch>
            <Route  path="/products" component={ProductsTab}/>
            <Route  path="/products/:id" component={ProductDetails}/>
			  </Switch>
        
      
            </div>
    )
  }
}

ProductsMain = withRouter(ProductsMain);
export default ProductsMain;

//productdetails.js
class ProductDetails extends Component{

  render(){
    return(
            <div>
            <h2>
                Product Name
            </h2>
				<p>Details about project</p>
            </div>
    )
  }
}

ProductDetails = withRouter(ProductDetails);
export default ProductDetails;


//server side rendering
  const html = renderToString(
     <StaticRouter
       location={req.url}
       context={context}
     >
       <App/>
     </StaticRouter>
   );

＆＃13;

我面临的问题是 1）http://localhost:3000/products/all 当我从主导航导航时，这可以正常使用标签和内容，但是当我直接在浏览器中点击上面的URL时，它会删除我的标签并仅呈现AllProducts组件内容。 2）在AllProducts组件中，我有一个带url：http://localhost:3000/products/:p1234的链接项，当我点击链接时，url更改但组件不会渲染，因此也使用withrouter但没有运气。

React Router 4 - 服务器端渲染

0 个答案: