發生反應，呈現重定向頁面內容

Question

陣營路由器V4被重定向至網頁，但與主頁內容相同的主頁上不會呈現有關網頁內容INFACT其後來的網址變更

例：

本地主機：從這裏3000 //應用程序頁面，如果關於點擊

本地主機：3000 /關於//有關網頁內容的應用程序頁面

之後對指數的應用程序和有關的js

代碼個

index.js

import { BrowserRouter,Route,Switch,Redirect } from 'react-router-dom' 
import App from './App'; 
ReactDOM.render(
(<BrowserRouter> 
    <Switch> 
     <Route path="/" component={App}/>    
     <Redirect for="*" to="/" /> 
    </Switch>  
</BrowserRouter>) 
, document.getElementById('root')); 

app.js

 import React, { Component } from 'react'; 
     import About from './About'; 
     import {Route,Link} from 'react-router-dom' 

     class App extends Component { 
      constructor(props) 
      { 
       super(props); 
       this.state=({name:"", 
          age:"", 
          button_flag:0     
          }) 
      } 
      sample(){ 
       this.setState({button_flag:1}); 
      } 

      onchangeevent(name,event) 
      { 
       this.setState({button_flag:0}); 
       var change = {}; 
       change[name] = event.target.value; 
       this.setState(change); 
      } 


      render() { 
      return (
       <div className=""> 
       <div className=""> 
       <input type="text" value={this.state.name} name="name" onChange={this.onchangeevent.bind(this,"name")}/> 
       <input type="text" value={this.state.age} name="age" onChange={this.onchangeevent.bind(this,"age")}/> 
       {this.state.button_flag === 1 && 
        <div> 
        <h3>{this.state.name} : {this.state.age}</h3>    
        </div> 
        } 
       </div> 
       <p className=""> 
        <button onClick={this.sample.bind(this)}>test</button> 


        <Link to="About">About</Link> 
       </p> 

          <Route path="About" component={About}/> 

       </div> 
      ); 
      } 
     } 

     export default App; 

關於

import React,{Component} from 'react';  
    class About extends Component{    
      render(){ 
       return(
        <div> <p> hi </p> </div> 
       ); 
       }        
      } 
     export default About; 

Answer 1

你的路由配置應該是這樣的。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
import promise from 'redux-promise'; 

import reducers from './reducers'; 
import App from './App'; 
import AboutComponent from './components/AboutComponent'; 

const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div> 
     <Switch> 
      <Route path="/about" component={AboutComponent} /> 
      <Route path="/" component={App} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
    </Provider> 
    , document.querySelector('.container')); 

然後山歌您Link其中路線得到激活，

<Link to={`about`}> 
    About 
</Link> 

希望這有助於。快樂的編碼！