问题

Question

我可以通过输入直接 url 从一个页面导航到另一个页面，但是当我尝试单击链接到另一个页面的按钮时，我必须刷新页面。它不会更新页面本身，只是更改浏览器上的 URL。注意：这仅适用于 /chart/:sym 路由，所有其他路由都可以完美运行。这是代码： App.js：

<Switch>
            <Route exact path={["/", "/home"]} component={Home} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/profile" component={Profile} />
            <Route path="/user" component={BoardUser} />
            <Route path="/mod" component={BoardModerator} />
            <Route path="/admin" component={BoardAdmin} />
              <Route exact path="/chart">
                  <Chart symbol='nkla'/>
              </Route>
//BELOW IS WHERE THE PROBLEM HAPPENS
            <Route path="/chart/:sym">
                  <Chart symbol=''/>
              </Route>
          </Switch>

这是我链接到此页面的位置：

export default function Chart(props) {
  const { sym } = useParams();
  const [symbol, setsymbol] = useState(sym);
  const [curSelection, setcurSelection] = useState("intraday-prices");
  const [isLoaded, setisLoaded] = useState(false);
  const [data, setdata] = useState({});
  const [error, seterror] = useState(null);
  const [gainers, setgainers] = useState([]);
function toggle() {
    //setcurSelection(select)
    // this.setState({curSelection:select})
    console.log("test")
    
    fetch(`${process.env.REACT_APP_API}/${symbol}/${curSelection}?token=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(
        (result) => {
          let chartData = [];
          let chartLabels = [];
          for (let i = 0; i < result.length; i++) {
            if (result[i].average !== null) {
              if(curSelection!="intraday-prices"||(curSelection=="intraday-prices"&&i%5==0)) {
                chartData.push(result[i].close.toFixed(2));
                chartLabels.push(result[i].label);
              }
            }
          }
          setisLoaded(true);
          setdata({  
            labels: chartLabels,
            datasets: [
            {
              label: symbol,
              fill: false,
              lineTension: 0.1,
              backgroundColor: 'rgba(0,0,0,0)',
              borderColor: 'rgba(0,0,0,1)',
              borderWidth: 1,
              data: chartData
             }
           ]})
        },
        (error) => {
          setisLoaded(true);
          seterror(error)
          
        }
      )
  }

  useEffect(()=>{
    fetch(`${process.env.REACT_APP_API}/market/list/gainers?token=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(
        (result) => {
          setgainers(result)
          console.log(result);
        })
    toggle()
},[curSelection])

    return (
      <div>
        <div style={{display:"flex"}}>

        {gainers.slice(-5).map((element)=>{

          return <div key={element.symbol} className="card" style={{width: "25rem",margin:10,paddingLeft:2,paddingTop:2}}>
            <Link to={"/chart/"+element.symbol}>
              <p>{element.symbol}</p>
              </Link>
              </div>})}
        </div>
<button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/ytd")}>YTD</button>
        <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/2y")}>2 year</button>
        <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/5y")}>5 year</button>
        <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/1y")}>1 year</button>
        <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/1m")}>1 month</button>
        <button className="btn btn-primary" style={{margin:10}} onClick={() => setcurSelection("chart/6m")}>6 month</button>

这里是 index.js：


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Answer 1

问题

这里的主要问题是 Chart 组件对新更新的匹配参数值没有反应。换句话说，当路由改变并且 sym 是一个新值时，它不会更新组件中的任何内容。强制页面重新加载本质上是重新安装组件，以便使用新的当前 sym 匹配参数“重新初始化”状态。

解决方案

使用额外的 useEffect 钩子来“监听”sym 的更新并更新 symbol 状态。

export default function Chart(props) {
  const { sym } = useParams();
  const [symbol, setSymbol] = useState(sym);

  useEffect(() => {
    setSymbol(sym);
  }, [sym]);

  ...

如果有任何代码依赖于 symbol 状态，那么您可能需要为它们添加额外的效果。

如何使用反应路由器链接到另一个页面？

1 个答案:

问题

解决方案